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本 書 は 、 好 評 を 博 し た 
「 ス タイ ル シ ー ト 辞典 第 2 版 ] の 改訂 版 で す 。 


最新 ブラ ウザ Internet Explorer 6.0& 
Netscape 6.2 に 対応 し 、 

豊富 な 画面 と 見 や すい 紙面 で 、 

スタ イル シー ト (CSS) の 基本 か ら 

や さ し く 解説 し て いま す 。 

巻末 に は 配色 ビジ ュ ア ル サ ン プ ブル も つい て お り 、 
デザ イン の ヒン ト と し て も 利用 で きま す 。 
まる ご と 1 冊 CSS は 本 書 だ け ! 

CSS の 純正 解説 書 と し て 、 

ホー ムペ ー ジ 初心 者 か ら Web デ ザイ ナー の 方 まで 、 
長く 手元 に 置い て いた だ ける 1 冊 で す 。 





本 書 の サン プル ソー ス は すべ て 
Web ペ ベー ジ か ら ダ ウン ロー ド が 可能 で す 
さあ ! 今 す ぐ 自 分 の ペー ジ に 活か し まし ょ う ! 
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本 書 内 容 に 関す る お 問合せ に つい て 


この た び は 翔 泳社 の 書籍 を お 買い 上 げ い た だ き 、 誠 に あり が と う ご ざ いま す 。 英 社 で は 、 読 者 の 皆様 か 
ら の お 問い 合わ せ に 適切 に 対応 きせ て いた だ く た め 、 以 下 の ガ イド ライ ン へ の ご 協力 を お 願い 致し て お り 
ます 。 下記 項目 を お 読み いた だ き 、 手 順に し た が っ て お 問い 合わ せく だ さい 。 


@ ご 質問 され る 前 に 
弊社 Web サ イト の 「Q&A コ ー ナ ー」 (http://www.shoeisha.com/info/help.asp) を ご 参照 くだ さい 。 こ れ 
まで 受け た ご 質問 へ の 回 答 (FAQ) や 、 的 確 な ご 質問 方 法 に 関す る 情報 を 掲示 し て いま す 。 


人 @ ご 質問 方 法 

弊社 Web サ イト の 書籍 専用 質問 フォ ー ム (http://www.shoeisha.com/book/qa/) を ご 利用 くだ きい 。 記 
載 漏 れ や 独自 の 用 紙 等 に よる ご 質問 、 お 電話 や 電子 メー ル に よる お 問合せ 、 本 書 に は さ み 込 まれ た アン ケ 
ー ト は が き に 記入 きれ た ご 質問 等 は 、 お 受け し て お り ま せん 。 


※ 質 問 専用 シー ト の お 取り 寄せ に つい て 

Web サ イト に アク セス する 手段 を お 持ち で な い 方 は 、 ご 氏名 、 ご 送付 先 (ご 住所 郵便 番号 電話 
番号 また は FAX 番号 電子 メー ル ア ド レス ) お よび 「 質 問 専用 シー ト 送 付 希望 」 と 明記 の うえ 、 電 子 
メー ル (qaform@shoeisha.com)、FAX、 郵 便 (80 円 切手 を ご 同封 願い ます ) の いずれ か に て “編集 部 
読者 サポ ー ト 係 " まで お 申し 込み くだ さい 。 お 申し 込ま れ た 手段 に よっ て 、 折 り 返 し 質問 シー ト を お 
送り いた し ます 。 シー ト に 必要 事項 を 漏れ な く 記入 し 、" 編 集 部 読者 サポ ー ト 係 " まで FAX また は 郵 
便 に て ご 返送 くだ さい 。 


@ ご 回 答 に つい て 
ご 回 答 は 、 ご 質問 いた だ いた 手段 に よっ て ご 返事 申し 上 げ ま す 。 ご 質問 の 内 容 に よっ て は 、 回 答 に 数 日 
な いし は それ 以上 の 期間 を 要する 場合 が あり ます 。 


人 @ ご 質問 に 際 し て の ご 注意 
本 書 の 対象 を 越え る も の 、 記 述 個所 を 特定 され な いも の 、 ま た 読者 固有 の 環境 に 起因 する ご 質問 等 に は 
お 答え で きま せん の で 、 予 め ご 了承 くだ さい 。 


人 郵便 物 送付 先 お よび FAX 番号 
送付 先住 所 〒160-0006 東京 都 新宿 区 舟町 5 
FAX 番号 03.5362.3818 
宛先 (株 ) 翔 泳社 出版 局 編集 部 読者 サポ ー ト 係 


※ 本 書 に 記載 され た URL 等 は 予告 な く 変 更 さ れる 場合 が あり ます 。 

※ 本 書 の 動作 環境 に 関す る 詳細 は vii ペ ー ジ を ご 参照 くだ さい 。 

※ 本 書 の 出版 に あたっ て は 正確 な 記述 に つと め ま し た が 、 著 者 や 出版 社 な どの いずれ も 、 本 書 の 内 容 に 対 
し て な ん ら か の 保証 を する も の で は な く 、 内 容 や サン プル に 基づく いか な る 運用 結果 に 関し て も いっ きい 
の 貢 任 を 負い ませ ん 。 

※ 本 書 に 掲載 され て いる サン プル プロ グラ ム や スク リプ ト 、 お よび 実行 結果 を 記し た 画面 イメ ー ジ な ど は 、 
特定 の 設定 に 基づい た 環境 に て 再現 され る 一 例 で す 。 


本 書 に 記載 し た 会 社名 、 ソ フト ウェ ア 名 、 ハ ー ド ウェ ア 名 は 各社 の 商標 お よび 登録 商標 で す 。 


エエ エア エ Y エ Y ヶ エ ヶ ェ ヤ ヶ COCO( キ エキ ャ キャ ぃ いい ヶ Oc 
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3 大 文字 ・ 小 文字 に 置換 
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文字 の 垂直 位置 を 指定 し た い 
文字 の 均等 割付 を 指定 し た い 
文字 間隔 を 指定 し た い .… 
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14 単語 内 で の 改行 処理 を 指定 し た い . 
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INTRODUCTION 





本 書 は 以下 の 環境 に お ける ブラ ウザ 表示 に 基づい て 記述 され て いま す 。 


日 本 語 版 Microsoft Windows XP 
Windows 版 Intemet Explorer 6.0 
Windows 版 Netscape 6.2 


サン プル ソー ス を 表示 し て いる ディ スプ レイ 画面 は 、 基 本 的 に 各 ブ ラウ ザ の デフ ォ ル ト 設 定 
(初期 設定 ) で す が 、 効 果 が 明確 に ちら われ る よう に 
Intemet Explorer 6.0 [文字 サイ ズ ] [最大 ] 
Netscape 6.2 フォ ント [サイズ ] [20] ピク セル 
に 設定 し て いま す 。 
な お 、 サ イズ を 変え た ほう が 効果 が 明確 に あら われ る と 判断 し た 項目 は 、 適 宜 設 定 を 変更 し て 
いま す 。 


フォ ント は デフ ォ ル ト の まま で す の で Internet Explorer 6.0、Netscape 6.2 と も に 「MS 
P ゴシック 」 と な り ま す 。 

この 設定 は あく まで も 一 例 で す の で 、 ユ ー ザ ー の フォ ント サイ ズ や フォ ント の 種類 に よっ て 必 
ず し も 本 書 の 表示 通り に は な ら な いこ と を ご 了承 くだ さい 。 


INTRODUCTION 





第 2 部 「 ス タイ ル シ ー ト リフ ァ レ ンス 」 で は 、 ス タイ ル シ ー ト の 効果 や 利用 する 場面 に あわ せ 
て 9 つの カテ ゴリ に 分 け て 解説 し て いま す 。 

間 項目 の タイ トル は 「 文 字 色 を 指定 し た い ] な ど 、 ス タイ ル シ ー ト の 機能 を 目的 か ら 引け る 形 
式 に な っ て いま す 。 

加 項 目 の 構成 要素 は 基本 書式 ・ 解 説 ・ サン プル ソー ス ・ サ ン ブ ル ソ ー ス を 表示 し た 画面 と な っ 
て お り 、 項 目 に よっ て は コラ ム や HTML タグ に 書き 換え た 場合 の メモ も 掲載 し て いま す 。 


坦 和 95 ニ ニ ビニ ニニ ニ ピ ニニ ラー ここ Ei 





効果 ・ 場 面 に よっ て 分 か れ て いま す 






介 の 9 に こら コ と ここ aoiocsSas こ に 
具体 的 に 何 が で きる か を 表し て いま す 。 ス タ 
イル シー ト の 使用 目的 か ら 選 ん で くだ さい 





@ 基 本 書式 --------------ー- ニ ニー ニー プー | 1 
その 項目 で 解説 する プロ バテ ィ の 基本 書式 4 
で す 。 解説 する プロ パテ ィ を 赤色 、 値 を 青 








/ 文字 を 振 人 は に し ます 。 ノ 







色 で 表記 し て いま す 。 な お 、 本 書 で は プロ た 9 が 
パテ ィ ・ 値 と も に すべ て 小文字 で 表記 し て / ce PP 生 4 
いま す nomal aou 央 Cam (デフ ォ ルト ) 


4 
乾 に よれ ば italic と @blique は 異な り ま す 。 し か し 、 現 在 の と ころ 一 般 的 な ブラ ウザ 
だ は その 拓 り 人 朋 し と お めか 同じ よう に 表示 され ます 。 
ナ 










その プロ パテ ィ が と る 値 で 、 基本 書式 で は 


文 や 六 で 表し て いま す 。 値 の 詳細 に つい て ・ 上 mmmgfk rumuk・/Vao/mp mt thrTemton/mr・ 


<htm> 


は 本 文中 で 解説 し て いま す 
ダ の http-equiv="Content-Type" content=*text/htmb charset=Shift JIS"> 
4 <meta http-equiv="Content-Style-Type" content="! 3 
念 解説 人 フ title> 双 字 を 振 体 に し た い </title> 2 0 が 
プロ パテ ィ や 値 に つい て の 解説 で す NM な 


body font-size: 20pt} 
@ 対 応 ブ ラウ ザ ア イ コン ------ーーーーー Tieggpei (fontsos iulk 


その 項目 で 解説 し て いる スタ イル シー ト が yee 粒 9 po 
対応 し て いる ブラ ウザ (Windows 版 

Internet Explorer 6.0、Netscape 6.2) 
を アイ コン で 示し て いま す 。 ア イコ ン 表 記 
の な い 場 合 は 、 そ の ブラ ウザ が 対応 し て い 








な いこ と を 示し ます 

















@ け サン プル ソー ス 

その 項目 で 解説 し て いる プロ パテ ィ や 値 を 使用 し た サン プル ソー ス で す 。 
解説 し て いる プロ バテ ィ は 赤色 、 値 は 青色 、 該 当 す る セレ クタ や それ を 受け . 
る タグ に つい て は 緑色 で 表記 し て いま す 。 本 書 で は 、 す べ て HTML 文書 内 で 


スタ イル シー ト を 設定 する 方 法 を と っ て いま す (Dp.15 参 照 )。 ま た 、class と 
id の 使い 分 け (p.25 参照 ) は 、 サ ン ブ ル に 多様 性 を 持た せる た め 、 特 に 規則 


性 は あり ませ ん 。 id 指定 と class 指定 を 置換 えて も 基本 的 に は 同様 の 結果 


す 
す 
U 
す 
す 
す 
上 
す 
す 
す 
/ と な り ま す 。 
/ な お 、 紙面 の 関係 で 一 部 省略 し た り 、 改 行 を 行っ て いま す 
す 
す 
す 
し 
す 
す 
す 
す 
す 





alc を 指定 し て いま す 。<7p> 
wet oblque を 指定 し て いま す 。</p> 
TE/ コ 一 -~~- ディ スプ レイ 
サン ブル ソー ス を 実際 に ブラ ウザ で 表示 し 
た 場合 の 画面 で す 。 対応 し て いな い ブ ラウ 
ザ に は アイ コン に ぶ X を つけ て いま す 





@ コ ラム 
その 項目 の スタ イル シー ト を 使用 する 際 の 
注意 点 や 関連 する トピ ッ ク 、 さ ら に 理解 を 
深め る た め の 内 容 を 掲載 し て いま す 





pp に ge: o2/gve ぎ 導 定 し て /! ま チ 。 
font-style: normal を 指定 し て いま す 。 


| レー~ー~~ー @ 一 HTML タグ を CSS に 改め る 


oytrso7er (gc ま 導 門 し て "まず 。 解説 し て いる 項目 の スタ イル シー ト を 
HTML タグ で 記述 し た 場合 を 参考 と し て 紹 


ん ot-etyer 27qve ぎ 導 定 て! まず 
介し て いま す 。 

デザ イン に 関す る 指定 は スタ イル シー ト の 

使用 が 推奨 され て いる の で 、 書 き 換え の 際 


の 参考 に な り ま す 













で 導体 を 指定 する に は 





コー--- 但 対 応 表 
の 旧 バ パー ジョ ン に お ける 各 ブ ラウ ザ の 対応 表 
っ で す (Windows 版 )。Macintosh 版 で の 
動作 が 異な る 場合 な ど 、 特 筆 す べき 点 は 欄 
外 に 明記 し て いま す 









ト で 表現 する と 以下 の よう に な り ま す 、 





同 本 の 多 果 を スタ イル シー 
(hontse] 












ーーー 久 参 照 
関係 の 深い 項目 へ の リン ク で す 。 合わ せ て 


参照 する こと で 体系 的 に 理解 が 深まり ます 








を 則 し た い 
フォ ント を 一 肝 し て 痢 証し た い 














スタ イル シー ト の 
基礎 








STYLESHEET BASIC 





Web ペー ジ の 話題 の な か で 、 ス タイ ル シ ー ト ・CSS と いう 言葉 は 決し て めずらし いも の で は 
な く な り ま し た 。 ス タイ ル シ ー ト と は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ の レイ アウ ト を 
定義 する 技術 ] と いう こと が で きる で し ょ う 。 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を 示す 言語 で す 。 た と えば 、 見 出し が 
あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの よう な 要素 で 構成 され て 
いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を 、 コ ン ピ ュ 
ー タ に 知ら せる た め の 言 語 な の で す 。 表現 方 法 を 指定 する た め の 言 語 で は あり ませ ん 。 し か し 実 
際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レ イア ウト の た め の テ ー ブ ル の 利用 
な ど 、 文 書 の 体 哉 、 つ まり 見 栄え まで も 定義 せる よう に な っ て いき まし た 。 W3C で は この 状況 を 
改め る た め 、 構 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、HTML の 機能 で は な い 体 裁 の 
制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り ま し た 。 こ うし た 姿勢 の も と に 生み 出 
され た の が スタ イル シー ト の 概念 で す 。 

W3C は 1996 年 12 月 に スタ イル シー ト 言 語 の 1 つ で ある CSS1 (Cascading Style 
Sheets Level 1) を 勧告 し 、Internet Explorer 3.0 と Netscape Navigator 4.0 が この 技術 
を 導入 し は じ め ま し た 。CSS1 で は HTML で 可能 だ っ た デザ イン の ほとん ど を 扱え る よう に な っ 

て いま す 。 そ の 後 1998 年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ ま し た 。CSS2 は 、 
CSS1 より も 細か い 設 定 が で きる よう に な っ て いま す 。 ま た 、 デ ザイ ン 面 だ け で な く 印 刷 や 音声 
に 関す る 設定 な ど 、Web ペー ジ 以 外 へ の 出力 に つい て も 考慮 され る よう に な り ま し た 。 そ の 背景 
に は XML の 登場 が め り ま す 。 XML は HTML に 比べ て ブラ ウザ へ の 依存 度 が 低く 、 HTML で は 
実現 で き な い さま ざま な 設定 や 操作 が 可能 で す 。 XML で も 、 ペ ー ジ の デザ イン に つい て スタ イル 
シー ト を 利用 し ます 。 本 書 は スタ イル シー ト を HTML に 組み 込む こと に 特 化し た 内 容 に な っ て い 
ます が 、 基 本 を 理解 で きれ ば XML へ 実装 する こと も それ ほど 難し いも の で は あり ませ ん 。 ぜ ひ 本 
書 で スタ イル シー ト を マス ター し て くだ さい 。 

な お 、 現在 一 般 的 に いわ れ て いる 「 ス タイ ル シ ー ト 」 と は 、 ス タイ ル シ ー ト 言語 の 1 つ で ある 
CSS を 指し て いる こと が 多く 、 本 書 で も CSS を スタ イル シー ト と 表記 し て いま す 。 
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スタ イル シー ト を 組み 込む 上 で 必要 と な る HTML の 知識 を 確認 し て お きま し ょ う 。HTML 文 
書 の 作成 方 法 な ど 、 も っ と も 基本 的 な 点 に つい て は 本 書 で は 割愛 し ます の で 、 詳 し く は 本 書 姉妹 
書 「HTML タグ 辞典 第 5 版 ]」 や その 他 の ホー ムペ ー ジ 作成 書 を 参考 に し て くだ さい 。 








⑯ HTML の 基本 構造 


HTML の 一 番 基 本 的 な 構造 を 示す と 次 の よう に な り ま す 。 


ーー mm 。  ] 
に …。。 


< div class="sample" > タグ と 要素 は 別 の も の で す 。</diV> 


この よう に HTML タグ が 形成 する か た まり を 「 要 素 ] と いい ます 。 要素 は 、 よ り 詳し く は ブロ 
ッ ク レ ベル 要素 と イン ライ ン レ ベル 要素 に 大 別 さ れ 、 他 の どの 要素 を 内 容 に 含め る こと が で きる 
か な ど に 決ま り が あり ます 。 た と えば イン ライ ン レ ベル 要素 の な か に ブロ ッ ク レ ベル 要素 を 入れ 
る こと は で きま せん 。 

また 、 ス タイ ル シ ー ト と の 関連 で みる な ら は ば 文字 の 水平 位置 を 指定 する text-alidn プロ パテ ィ 
は ブロ ッ ク レ ベル 要素 の み に 適用 、 文 字 の 垂直 位置 を 指定 する vertical-alidgn プロ パテ ィ は イン 
ライ ン レ ベル 要素 と セル 要素 の み に 適用 する こと に な っ て いま す 。 

定義 か ら 外れ る 要素 で あっ て も 指定 が 有効 な 場合 も あり ます の で 、 本 書 は 要素 の タイ プ を あま 
り 意識 し な く て も 利用 で きま す が 、 よ り 正 確 に スタ イル シー ト を 記述 する な ら ば 、 要 素 が どん な 
タイ プ に 属す る か は ぜひ 理解 し て お きた い 点 で す 。 


※ 本 書 で は 便宜 上 タグ 、 要 素 、 要 素 名 と いう 言葉 を 併用 し 、 状 況 に 応じ て 使い 分 け な が ら 解 説 を 


すす め ま す 。 こ れ ら の 言葉 は 同じ も の と 考え られ が ち で す が 、 厳 密 に は 違う も の で す の で 注意 し 
て 覚え て くだ さい >。 


ブロ ッ ク レ ベル 要素 

見 出し や 段落 な ど 1 つの まとまり を 構成 する 要素 で す 。 一 般 的 に は 前 後に 改行 が 入り ます 。 
address, blockquote, center, dir, div, dL fieldset, form, h1 -- h6, hr, isindex, menuu 
noframes, oL p, pre, table, ul 


イン ライ ン レ ベル 要素 

文字 と 同じ レベ ル で 扱わ れる 要素 で す 。 一 般 的 に は 前 後に 改行 は 入り ませ ん 。 
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, 
iiframe, img, input, kbd, labeL map, object, q, s, samp, select, smalL span, strike, 
stronq, sub,sup, textarea, tt, u, Var 


※ Ins 要素 、del 要素 は 、 ブ ロッ クレ ベル 、 イ ン ラ イン レベ ル の 両方 で 使え ます 。 


別 扱 い の 要 素 

スタ イル シー ト で は ブロ ッ ク レ ベル 要素 の な か で も 以下 の も の に つい て は 、 別に 扱う 場合 も あ 
り ま す 。 
テー ブル 要素 、 セ ル 要 素 、 キ ャ プシ ョ ン 要 素 

テー ブル 要素 は <table> タグ 、 セ ル 要 素 は <th> タグ や <td> タグ 、 キ ャ プシ ョ ン 要 素 は 
<caption> タグ の 要素 で す 。 
リス ト ア イ テ ム 要素 

リス ト ア イ テ ム 要素 は リス ト の <li> タグ (リス ト 項 目 の 1 つ 1 つ ) の こと で す 。 


大 文字 か 小文字 か ECCCCCCOOOULOLOLLKYLKKKKKKYKKYYYKYKYYYYYYKKYKP 


HTML 文書 中 で 使わ れる タグ や 要素 名 、 属 性 、 ス タイ ル シ ー ト の 設定 な ど は 大 文字 小文字 を 区 別 し ま せ 
ん 。 本書 で は XHTML が すべ て を 小文字 で 書く よう 定義 され て いる こと を 考慮 し て 、 小 文字 で 表記 する よ 
う 統 一 し て いま す 。 


スエ エエ エミ エエ エエ エメ エエ エ エエ ミミ エ ミミ オオ ナナ IIIIKIALYNLAYAXAXMXAXIYRKKYYYYYKEKKKKKKKYYKKKKEKKKKLL 








⑯ HTML の 木 構造 と 親 要素 ・ 子 要素 


HTML は 文章 の 論理 構造 を 示す も の で すか ら 、HTML 文書 は 木 構造 (ツリ ー 構 造 ) の か た ち 
を と っ て いま す 。 

どの よう な 木 構造 と な る か は 、 文 書 に よっ て 異な り ま す が 、 通 常 <html> タグ の 下位 に は 
<head> タグ と <body> タグ が あり 、<body> タグ の 下 に は 文書 の 内 容 に 応じ て 木 構 造 が 展開 さ 
れる こと に な り ま す 。 こ の 木 構造 に お いて 、1 つ 上 位 の 階層 に ある 要素 (外側 に ある 要素 ) を 「 親 
要素 ] と いい ます 。 逆 に 親 要 素 か ら 見 て その 階層 下 に ある 要素 (内 側 に 含ま れる 要素 ) は 「 子 要 
素 ] と な り ま す 。 親 要 素 か ら 子 要素 、 さ ら に 子 要素 (これ ら を まとめ て 「 子 孫 」 と 表現 する 場合 
も あり ます ) と いう よう に 木 構造 が 展開 され て ゆく の で す 。 木 構造 の 出発 点 で ある html 要素 は ル 


ー ト 要素 と 呼び ます 。 

た と えば 下記 の サン プル ソー ス に お いて 、<li> タグ は <ul> タグ の な か に 含ま れ て いま す 。 つ ま 
りこ の HTML 文書 で は 要素 の 親 要素 は ul 要素 と な り ま す 。 同 じ よ うに ul 要素 の 親 要 素 は body 
要素 と な り 、 逆 に body 要素 は 子 要素 h11、ul、h2、p を 持つ と いう こと に な り ま す 。 

スタ イル シー ト に お いて は 、 こ の よう な 親 要 素 ・ 子 要素 の 関係 に よっ て セレ クタ の 設定 や デフ 
オル ト 値 、 継 承 な ど に 影響 が あり ます 。 親 要 素 ・ 子 要素 の 関係 を 理解 し て お きま し ょ う 。 


<html> 
<head> 
<title>HTML の 木 構 造 と 親 要 素子 要素 </title> 
</head> 
<bodV> 
<h1>HTML の 木 構造 と 親 要素 ・ 子 要素 </h1> 
<ul> 
<li>HTML の 木 構造 </li> 
<li> 親 要 素 ・ 子 要素 </li> 
</ul> 
<h2> 木 構造 と は </h2> 
<p>HTML は 文章 の 論理 構造 を 示す も の で すか ら 、HTMIL 文書 は <strong> 木 構造 (ツリ ー 構 造 ) 
</strong> の か た ち を と っ て いま す 。</p> 
</bodV> 
</htm> 





^ ム サン ブル ソー ス の 木 構造 








MI1)」 昌 上 7 ト )【 


セレ クタ { プロ パテ ィ : 値 } 





スタ イル シー ト の 基本 的 な 書式 は 次 の よう に な り ま す 。 


ETCTPTrTm 


| | 
h1 {color : blue} 


Zrmrmr Porzzrrerz 





セレ クタ スタ イル を 適用 する 対象 

宣言 設定 する スタ イル 

プロ バ パティ 設定 する スタ イル の 性 質 ( 色 、 大 き さ な ど ) 
値 プロ パテ ィ ご と に 決め られ て いる 値 


この よう に 、 ス タイ ル シ ー ト は 「" セ レク タ " の "プロ バテ ィ " を " 値 " に する 」 と いう 形 で 設定 し 、 
HTML 文書 に 組み 込ん で いく も の で す 。 

この 例 で は h1 要素 に 対し て 色 を ブル ー に する よう 指定 し て いま す 。 この スタ イル を 設定 し た 文 
書 で は h1 要素 が 出 て きた 場合 、 そ の 範囲 は ブル ー で 表現 され る こと に な り ま す 。 

つま り 、 セ レク タ と は スタ イル を 適用 させ る 対象 で す 。 プ ロ パ ティ と 値 に は 、 セ レク タ に 対し 
て どの よう な 指定 を する か 、 指 定 す る スタ イル の 種類 と その 具体 的 な 値 を 記述 し ます 。 プ ロ パ テ 
ィ を 複数 設定 する 場合 に は { } の 中 に 、「:」 (セミ コロ ン ) で 区 切っ て 並べ ます 。 複数 行 に な っ て も 
か まい ませ ん 。 そ の 際 、 宣 言 の 最 後に セミ コロ ン を つけ る こと も で きま す 。 

で は 、 上 の 例 を 利用 し て 実際 に 簡単 な ソー ス を 書い て み ま し ょ う 。 


<html> 
<head> 
<title> スタ イル シー ト の テス ト </title> 
<style type= "text/css"> 
h1 { 
color: blue: 
font-style: italic 


</style> 

</head> 

<bodV> 

<h1> スタ イル シー ト </h1> 

<h2> スタ イル シー ト と は </h2> 

<D> 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を …… 
</D> 

</body> 

</htm> 


強 スタ イル ジー ト の テス ト Microsoft Internet Explorer 


| アイ ル ⑥ 編集) 表示 ⑰ お 気 に 和 D⑱ ツール D ヘル プ ⑪ 


GO ま の 回 還 @ の ws 
ズ スズ タプ ブル シ ー ム 


スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を 





この 例 で は 、<style> タグ を 利用 し て 、h11{ color: blue: font-style: italic }] こ いう スタ イル を 
設定 し て いま す 。 そ の 結果 、 文 書 中 の <h1> タグ で 囲ま れ た 範囲 が 、 設 定 し た よう に ブル ー 
(color: blue) の イタ リッ ク 体 (font-style: italic) で 表示 され て いま す 。 

<style> タグ を 利用 する ほか に も 、 ス タイ ル シ ー ト の 設定 に は いく つか 方 法 が あり ます が 、 詳 
し く は 「 ス タイ ル シ ー ト の 設定 方 法 」 (p.11) を 参照 し こく だ さい 。 


STYLESHEET BASIC 





スタ イル シー ト で コメ ント を 入れ る に は 、[/*]」 と 「7」 で 挟み ます 。 コ メン ト は 入れ 子 に する 
こと は で きま せん 。 

また 、 前 項 の 例 の よう に <style> タグ を 使っ て スタ イル シー ト を 設定 する と 、 ス タイ ル シ ー ト 
に 対応 し て いな い ブ ラウ ザ で は 、 ソ ー ス が その まま 表示 され て し まう 可能 性 が あり ます 。 こ の 対 
策 と し て 、「<!--」 と 「-->]」 で スタ イル の 設定 個所 全体 を コメ ント アウ ト し て 、 そ の 部 分 が その 
まま 表示 され る の を 防ぐ 方 法 が あり ます 。 


<html> 

<head> 

<title= スタ イル シー ト の テス ト </title> 

<style type="text/css"> 

<!-- 

ht { 
color: blue: /* h1 要素 を ブル ー の イタ リッ ク 体 に 設定 */ 
font-style: italic 

} 

ーー> 

</stVle> 

</head> 

<body> 

<h1> スタ イル シー ト </h1> 

<h2> スタ イル シー ト と は </h2> 

<D テ > 


Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を …… 


</P> 
</body> 
</htm に 


当 スタ イル シート の テス ト - Microsoft Internet Explorer 


| アイ ル ) 編集 E) 表示 お 気 に 和 D⑯ ウー ル D へ JM プ ⑪⑬ 





ズ タ ア ジー 


スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を 





人 「/"]「 ツ 7] で 挟ま れ た 部 分 は 表示 され な い の で 、 メ モ 書 き 等 に 利用 する こと が で きま す 


タデ ヌ ヨ ヌ ヨ ぇ ヨ ぇ z ヨ ぇ ヨ ぇ z ヨ ユゥ xs 


プロ パテ ィ 、 コ ロン 、 値 の 前 後に は 半角 スペ ー ス 、 タ ブ 、 改 行 を 入れ る こと が で きる の で 、 適 宜 入 れ て 
記述 する と ソー ス が 見 や すく な り ま す 。 


TCRKKILKKKKKRL は KKLXKKKK ミ KK ミミ KK ミミ ミミ ミト ミス ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ まま ミ ま すま すす すま 】 


スタ イル シー ト に お ける 引用 符 CCCCCCCCCCCCCCCCCCCCCCCCCCLCCCCLYCKKCKKKYKKKKYYYYYY 


HTML で は 値 を 「" "」 (ダブ ルク オー テー ショ ン ) や 「' !] (シン グル クォーテーション ) で 囲む こと 
が 推奨 され て いま す 。 し か し 、 ス タイ ル シ ー ト で は 値 と し て 記述 する キー ワー ド を こう し た 引用 符 で 囲う 
と 、 文 字 列 と し て 解釈 され て キー ワー ド で は な く な り 、 ス タイ ル シ ー ト の 効果 が 得 ら れ な く な っ て し まい 
ます の で 注意 し て くだ さい 。 

例 : red キー ワー ド と し て 認識 され る 
"red" 文字 列 と し て 認識 され て し まう 


TTYTTTLEEEKLKLIAALLLLLLKLKRRKRKKAKKAAAAARRKAKKALKAKXKAKKRKRRXRRRXKXKIKKKEISS】 





STYLESHEET BASIC 


<meta http-equiv= "Content-Style-Type" content="text/css"> 





現在 一 般 的 に いわ れ て いる 「 ス タイ ル シ ー ト 」 と は 、 ス タイ ル シ ー ト の 一 種 で ある CSS 
(Cascading Style Sheets) を 指し て いる こと が 多い の で す が 、 実際 に は スタ イル シー ト の 実 
現 方 法 は CSS だ け で は あり ませ ん 。 そ の た め 、 ス タイ ル シ ー ト を 利用 する 場合 に は デフ ォ ル ト で 
使用 する スタ イル シー ト を 指定 し て お く 必 要 が あり ます 。 こ れ に は <meta> タグ を 使っ て 指定 し 
ます 。 必ず <head> タグ と </head> タグ の 間 に 記 述 し て くだ さい 。 

多く の 場合 は これ ら の 情報 を 記述 し な く て も ブラ ウザ 側が 自動 的 に 判別 し ます が 、 文 字 化け や 
誤動作 が 生じ な いと も 限り ませ ん 。 正 し く 表示 させ る た め に は 指定 し て お くべ き で す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_J1S"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<titte> スタ イル シー ト の 設定 </title> 

<style type= "text/css"> 


EE 


ー> 
</style> 
</head> 
<body> 


</bodV> 
</html> 





STYLESHEET BASIC 





スタ イル シー ト の 設定 に は 大 きく 分 け て 以下 の 3 つの 方 法 が あり 、 ス タイ ル シ ー ト を 利用 する 
状況 に 応じ て 使い 分 けが で きる よう に な っ て いま す 。 


1 外部 スタ イル シー ト を 読み 込む (p.12 参照 ) 
2 HTML 文書 に まとめ て 設定 する (p.15 参照) 
3 タグ に 直接 スタ イル を 設定 する (p.17 参照) 


それ ぞ れ 適用 され る 範囲 が 異な る だ け で な く 、 競 合 し た 場合 の 優先 順位 も ほぼ 決ま っ て いる 
(p.19 参照 ) こと か ら 、 こ れ ら を 組み 合わ せ て 柔軟 に スタ イル を 指定 する こと が で きま す 。 





1 外部 スタ イル シー ト を 読み 込む 


加 、 ニ 


2 HTML 文書 内 に まとめ て 設定 する 3 タグ に 直接 指定 する 








@ 1.. 外 部 スタ イル シー ト を 読み 込む link 要素 を 使用 する 


<iink re="stylesheet" href=" 娘 " type="text/css"> 
太 wt スタ イル ファ イル の URL (拡張 子 は *.css) 


スタ イル を 設定 し た ファ イル を HTML 文書 と は 別に 用 意 し 、 こ れ を <link> タグ で 読み 込む 設 
定 方 法 で す 。<head> - </head> 内 に 記述 し 、href 属性 で 外部 ファ イル の URL を 指定 し て くだ 
さい 。 こ の 場合 用 意 する 外部 ファ イル は 、 ス タイ ル の み を 記述 し 、「*.cssS」 と いう 拡張 子 を 付け た 
テキ スト ファ イル で す 。 

rel 属性 で は スタ イル シー ト に リン ク し て いる こと を 、type 属性 で は その リン ク さ れ て いる ス 
タイ ル シ ー ト の 種類 (タイ プ ) が 「textcssS」 で ある こと を 示し ます 。 ス タイ ル シ ー ト の 実現 方 
法 は (本 書 で 解説 し て いる ) CSS だ け で は あり ませ ん 。 そ の た め 、type 属性 で 利用 する タイ プ 
を 指定 し て お く 必 要 が ある の で す 。 

この 方 法 は ひと つの スタ イル ファ イル を サイ ト 全 体 に 適用 させ 、 サ イト 全体 の ペー ジ の 究 囲 気 
を 統一 し た い 場 合 な ど に 利用 する と よい で し ょ う 。 

な お 、 複 数 の 外部 スタ イル シー ト を 利用 し た い 場 合 は 、 必 要 な 数 だ け <link> タグ に よる 指定 を 
記述 し ます 。 





人 る ひと つの スタ イル ファ イル を 複数 の HTML 文書 に 適用 する こと が で きま す 











<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 外部 スタ イル シー ト を 読み 込む </title> 

<liink re に "stylesheet" href="design.css" type="text/css"> 

</head> 


<body> 

<h1> スタ イル シー ト と は </h1> 

<P> 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ の レイ アウ ト を 定義 する 技術 ] 
と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 
来 HTML の 機能 で は な い 体裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生 
み 出 され まし た 。 

</P> 

</bodV> 

</htm> 





スタ イル ファ イル (ファ イル 名 は design.《SS) 


backqround-color: #cfc: 
color: rgb(0,128,0) 


{ color: blue } 














スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する } 
術 」 と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と 
離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よ 
いう 姿勢 の も と に 生み 出さ れ ま し た 。 


区 
ノ 
の 
と 

(q 


を 
う 








人 design.CSs の 指定 が 反映 され ます 


往 外 部 スタ イル シー ト を 読み 込む - Microsoft mternet Explorer 


スタ イル シー ト と は 


スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技 

術 」 と いう こと が で きま す .。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 
離さ せ 、 本来 HTML の 機能 て は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 

いう 姿勢 の も と に 生み 出さ れ ま し た 。 





回 
全 design.CSS を 読み 込む 設定 を し な い 場合 の 表示 (スタ イル シー ト は 適用 され ませ ん ) 





外部 スタ イル シー ト の 利点 SO 


外部 スタ イル を 使っ て スタ イル シー ト を 設定 する と 、 ひ と つの スタ イル ファ イル を 複数 の HTML 文書 
で 共有 で きる だ け で な く 、HTML 文書 の ソー ス を 修正 せ ず に スタ イル を 変更 する こと が で きま す 。 ま た 、 
スタ イル ファ イル を いく つも 用 意 し て 、 必 要 に 応じ た スタ イル ファ イル を 読み 込む お よう に 設定 する こと も 
で きま す 。 こ の よう に メン テ ナ ン ス が し や すい 、 和 柔軟 な 表現 が で きる 、 と いっ た スタ イル シー ト の 利点 を 
活か す た め に 、W3C で は 外部 スタ イル の 使用 が 推奨 され て いま す 。 


し ルル ルナ エエ よ エエ エエ エメ メメ エメ メメ メメ オオ オミ オナ オト MKIKKIIIKIKKKINKKIREREEEEEKKYYKKYKYYEKEKEKLYKKK ミ ミル ルト 





⑯ 2..HTML 文書 内 に まとめ て 設定 する 一 style 要素 を 使用 する 


<style tVpe= "text/css"> 文 </style> 





文 *ee ス タイ ル の 設定 


HTML 文書 に 設定 し た い ス タイ ル を 記述 する 方 法 で す 。<style> と </style> タグ の 間 で スタ 
イル を 定義 し 、 こ れ を <head> - </head> 内 に 配置 し ます 。 記述 し た ペー ジ 内 で の み 有 効 に な 
る の で 、 ペ ー ジ ご と に スタ イル を 適用 し た い 場 合 な ど に 便利 な 方 法 で す 。 

本 書 の サン プル ソー ス は 基本 的 に この 方 法 を 使っ た 例 と な っ て いま す 。 





AHTML 文書 内 の み で 有効 で す 。 ほ か の HTML 文書 に は 影響 し ませ ん 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<htm> 

<head> 


<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>HTML 文書 内 に まとめ て 設定 する </title> 

<style type="text/css"> 


<!-- 





ME。 
backqround-color: #cfc: 
color: rgb(0,128,0) 

} 


P { color: blue } 


ーー テ 


style> 








スタ イル シー ト の 設定 方 法 


16 








</head> 


<bodV> 

<h1> スタイル シー ト と は </h1> 

<D> 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ の レイ アウ ト を 定義 する 技術 
と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 
来 HTML の 機能 で は な い 体裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生 
の み 出 され まし た 。 

</P> 

</bodV> 

</html> 











強 HTML 文書 内 に まとめ て 設定 する icrosoft Internet Explorer 
アイ ル () 編集 表示 お 気 に 入 D⑯ ツー ル ①D ん ルプ ⑬ 


@・@6 回 国人 人 の 球 宮 smD 休 の の 回 ・ あ 回 ・ "ゆめ 2 7 


スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技 
術 」 と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 
分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よ 
うと いう 秋 替 の も と に 生み 出さ れ ま し た 。 








⑯ 3.. タ グ に 直接 スタ イル を 設定 する 一 style 属性 を 使用 する 


< 廊 style=" 娘 "> て </> 





云 w…… ス タイ ル を 設定 し た い タ グ 
太 *c ス タイ ル の 設定 


style 属性 を 使用 し 、 タ グ に 直接 スタ イル を 記述 する 方 法 で す 。 こ の 場合 は style 属性 の 値 と し 
て スタ イル を 設定 する た め 、「style=] に つづ け て 「" "」 の 中 に プロ パテ ィ と 値 を 記述 し て いき 
ます 。 特 定 の 箇所 に の み ス タイ ル を 設定 する 場合 に 利用 し ます 。 


^ style 属性 で 指定 し た タグ に の み 有 効 に か り ま す 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona/EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> タグ に 直接 スタ イル を 設定 する </title> 

</head> 





<bodV> 

<h1 style="background-color: #cfc: color: rgb(0.128.0) "> スタ イル シー ト と は 
</h1> 

<p style="color: blue"> 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば <span style="color: red"> 「Web ペ ー ジ 
の レイ アウ ト を 定義 する 技術 ] </span> と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 
指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 
の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ ま し た 。 








育 タケ に 直 接 ス タイ ル を 


スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技 
術 」 と いう こと が で きま す . 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 
分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よ 
うと いう 次 勢 の も と に 生み 出さ れ ま し た .。 





人 タグ の 属性 と し て スタ イル シー ト を 指定 する と 、 タ グ ご と に 細か い 設定 が 可能 に な り ます 





STYLESHEET BASIC 





スタ イル シー ト で は 、 外 部 スタ イル シー ト を 読み 込む 方 法 、style 要素 を 使用 し て HTML 文書 
内 に まとめ て 設定 する 方 法 、style 属性 を 使用 し て タグ に 直接 スタ イル を 設定 する 方 法 な どの 設定 
方 法 が 用 意 さ れ て いま す 。 そ の た め 、1 つの 文書 に 複数 の スタ イル が 設定 され 、 そ れ ら が 競合 する 
可能 性 も あり ます 。 こ うし た 場合 に 対処 する た め に スタ イル に は 基本 的 な 優先 度 が つけ られ て い 
ます 。 


style 属 性 に よる 設定 Style 要素 に よる 設定 外部 スタ イル に よる 設定 


つま り 、 後 か ら ブ ラウ ザ に 読み 込ま れる スタ イル ほど 優先 順位 が 高く な る ( 後 か ら 読み 込ま れ 
た 設定 が 先 に 読み 込ま れ た 設定 を 上 書き する ) と いう わけ で す 。 ま た 、1 つの 文書 内 で 競合 が お こ 
っ た 場合 は 、 よ り 限定 的 で 詳細 な 指定 を 行っ て いる スタ イル が 優先 され ます 。 た と えば 要素 に 対 
し て 指定 し た スタ イル より は 、 ク ラス に よる スタ イル の ほう が 優先 され る 、 と いっ た よう に な り 
ます 。 


スタ イル シー ト の 制作 者 に よる 優先 順位 CGCCCCCCCCCCCCCCCCCTTCCCCCCCCUCCKKKYKKKKTD 


スタ イル シー ト は 文書 を 制作 し た 人 に よる も の だ け で な く 、 ブ ラウ ザ が 初期 設定 と し て 持つ て いる スタ 
イル シー ト や ユー ザー が 定義 せる スタ イル シー ト な ども あり ます 。 こ の よう に 制作 者 の 異な る スタ イル が 
同時 に 設定 され た 場合 、 そ れ ぞ れ の 優先 度 は 次 の よう に な り ま す 。 


文書 制作 者 の スタ イル ユー ザー の スタ イル ブラ ウザ の スタ イル 


半 HRNBERRSN 夫 時 放 RoERT 害 ます 作 ty 


実際 に は こう し た 条件 も 加わ っ て 最終 的 な 優先 順位 が 処理 され る の で す 。 


CCYTTTYYYYYYIEKKKYKKYLLLLAYARLALARRR は KK スス スス ミミ ミミ ミミ ミミ ミミ ミミ ミネ ミオ メメ オメ ILLLIKEELXXILIJ 


さら に 、「!important」 と いう キー ワー ド を 指定 し て お く こ と で 、 こ れ ら の 優先 度 を 逆転 させ 
る こと も で きま す (D.20 参照 )。 
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最 優先 の スタ イル を 設定 する 


太 {人 人 : へ important } 





支 *eecce セ レク タ 
合 *eeee プ ロ パ ティ 
へ eeeee 値 


スタ イル シー ト に は 制作 者 や 設定 方 法 に よっ て 優先 順位 が つけ られ て 処理 され ます (p.19 参 
照 )。 し か し 同時 に 複数 の スタ イル シー ト を 適用 する こと で 、 場合 に よっ て は スタ イル が 競合 し 、 
意図 し た スタ イル に な ら な い 可 能 性 も 生じ ます 。 こ うし た 問題 を 避け る た め 、 優 先 さ せ た い スタ 
イル に 「!important] と いう キー ワー ド を 指定 し て お く 方 法 が あり ます 。 

「limportant」 は 優先 させ た い ス タイ ル の 「 プ ロ パ ティ : 値 ] に 続い て 指定 し ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Stvle-Type" content="text/css"> 
<title> 最 優先 の スタ イル を 設定 する </title> 
<style type="text/css"> 
<!-- 
h1 { 
backqround-color: #cfc: 
colorx rgb(0,128,0) !important 


P { color: blue !important } 
ーー テニ 

</style> 

</head> 


<bodV> 
<h1 style="color: #000"> スタ イル シー ト と は </h1> 








20 スタ イル の 優先 順位 


Me style="color: orange"> ki 
ド スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 
_ と いう こと が で きま す 。 文 書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 


来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生 
み 出 され まし た 。 


ッ p 
</body> 


</htm> 


当 最 俣 先 の スタ イル を 譜 定 する - Microsoft Internet Explorer 


アイ ル ⑪) 編集 (D 表示 ⑰ お 気 に 入 D⑯ ツー ル ①D へ ルプ ⑪ 


スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技 
術 」 と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 

分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう 
と いう 姿勢 の も と に 生み 出さ れ ま し た 。 





Alimportant を 指定 し て いる と 、h1 要素 で は color:#O000 より も color:rgb(0,128,.0) が 、p 要素 で は color:orandge より も 
color:blue が 優先 され ます 


当 最 刊 先 の スタ イル を 定 する - Microsoft Internet Explorer 





スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技 
術 」 と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 
分 離さ せ 、 本 来 HTML の 機能 で は な い 体 開 の 制御 に つい て は 別 の 方 法 を 導入 し よう 
と いう 容 勢 の も と に 生み 出さ れ ま し た 。 


ーーーーー 1 








STYLESHEET BASIC 





「 ス タイ ル シ ー ト の 書式 」 (p.6 参照 ) で すでに 述べ た よう に 、 セ レク タ と は スタ イル を 適用 す 
る 対象 を 指定 する も の で す 。「 ス タイ ル シ ー ト の 書式 ] で は タグ に スタ イル を 設定 する た め に 、 要 
素 名 を セレ クタ と し て 利用 し まし た 。 実際 に は セレ クタ の 指定 方 法 に は いく つも の 種類 が あり 、 
スタ イル シー ト を 利用 する 状況 に 応じ て 使い 分 けが で きる よう に な っ て いま す 。 主 に 利用 され る 
の は 、 次 の よう な セレ クタ で す 。 


タグ に スタ イル を 設定 する (p.23 参照 ) 

任意 の 範囲 に スタ イル を 設定 する (p.25 参照 ) 

タグ の 相関 関係 (子孫 の 要素 ) で スタ イル を 設定 する (D.28 参照 ) 
タグ の 相関 関係 (直接 の 子 要素 ) で スタ イル を 設定 する (p.30 参照 ) 
タグ の 相関 関係 (隣接 する 要素 ) で スタ イル を 設定 する (Dp.33 参照 ) 
タグ の 属性 に よっ て スタ イル を 設定 する (p.36 参照 ) 

疑似 クラ ス ・ 疑 似 要素 (p.39 参照 ) 


っ の の ト OMPO 一 


一 見 する と 複雑 で す が 、 こ の よう に さま ざま な セレ クタ を 用 意 す る こと で 、 和 柔軟 に スタ イル を 
指定 する こと が で きる よう に な っ て いま す 。 


22 














⑯ 1.. タ グ に スタ イル を 設定 する 





支 { 全 : へ } 1 つの タグ に 設定 

座 , 太 .…, 座 { 全 : へ} 複数 の タグ に 同一 スタ イル を 設定 
支 *eeee 要 素 名 

プロ パティ 

へ esseee 値 


タグ に スタ イル を 設定 する に は 、 該 当 タ グ の 要素 名 を セレ クタ に し ます 。 
複数 の タグ に 対し て 同じ スタ イル を 設定 する 場合 に は 、 要 素 名 を それ ぞ れ 「,」 (カン マ ) で 区 切 
っ て 並べ る こと で まとめ て スタ イル を 指定 する こと が で きま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/ html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> タグ に スタ イル を 設定 する </title> 

<style type="text/css"> 

<!-- 

h1 { background-color: #cfc } 

ht,h2 { color: rgb(0,128,0) } 

ー> 

</style> 

</head> 





<bodV> 

<h1> スタ イル シー ト の 設定 方 法 </h1> 

<P> 

スタ イル シー ト に は 幾つ か の 設定 方 法 が 用 意 さ れ て いま す 。 
</D> 

<h2> 外部 スタ イル シー ト を 読み 込む </h2> 


<D テ > 


セレ クタ の 種類 
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スタ イル の 設定 を 行っ た ファ イル (*.css) を HTML 文書 と は 別に 用 意 し 、 こ れ を 
&ltiink&gt: タ グ で 読み 込む 設定 方 法 で す 。 

</P> 

<h2>HTML 文書 内 に まとめ て 設定 する </h2> 

<D テ > 

HTML 文書 に 設定 し た い ス タイ ル を 記述 する 方 法 で す 。&ltzstyle&gt: と &lt:/style&gt: タ グ 
の 間 で スタ イル を 定義 し 、 こ れ を &ltzhead&gt:- &lt:/head&gt: 内 に 配置 し ます 。 

</P> 

<h2> タグ に 直接 スタ イル を 設定 する </h2> 

<D> 

style 属性 を 使用 し 、 タ グ に 直接 スタ イル を 記述 する 方 法 で す 。 

</D> 

</body> 

</htm> 








アイ ル (P) 統 集 CE) 表示 ⑰ お 気 に 入 D@ ウ - ル D へ ヘルプ ⑪ 


・@ 回 回 @ お ws 支 swop 人 テ の の 作 ・” 回 ・ 2 "7Fu2 の 


スタ イル シー ト に は 北 つ か の 設定 方 法 が 用 意 さ れ て いま す 。 


外部 スタ イル シー ト を 読み 込む 


スタ イル の 設定 を 行っ た ファ イル (* css) を HTML 文書 と は 別に 用 意 し 、 こ れ を <link> タ グ で 読み 込む 設定 方 法 
で す 。 


HTML 文 書 内 に まとめ て 設定 する 


HTML 文 書 に 設定 し た い ス タイ ル を 記述 する 方 法 で す . <style> と </style> タ グ の 間 で スタ イル を 定義 し 、 これ を 
く head> て </head> 内 に 配置 し ます 。 


タグ に 直接 スタ イル を 設定 する 


style 属 性 を 使用 し 、 タグ に 直接 スタ イル を 記述 する 方 法 で す 。 











⑯ 2. 任 意 の 範囲 に スタ イル を 設定 する 
文 .: 之 { 全 : へ} < 文 class=" 巡 "> や </ 友 > 
廊 # の {人 : へ} < 文 1d=" の "> て </ 文 > 
. 支 { 全 : 人 へ} < 人 免 class=" 六 "> </ 多 > 
# の て 4: へ } < id に "つて </ 多 > 
文 , 今 要素 名 
支 …… ク ラス 名 
の eeeeelD 名 


全 cccee プ ロ パ ティ 
へ eeeeee 値 








スタ イル に クラ ス や ID と いう 特定 の 識別 子 を ふっ て お き 、 必 要 に 応じ て class 属性 や id 属性 
で 適用 させ る 方 法 で す 。 複 数 の 要素 に 対し て 同じ スタ イル を 適用 し た り 、 逆 に 、 比 較 的 限定 され 
た 任意 の 範囲 に スタ イル を 適用 する な ど 、 前 述 (「 タ グ に スタ イル を 設定 する 」]) の よう な 要素 名 
だ け で は セレ クタ を 限定 で き な い 場合 に 利用 し ます 。 

クラ ス で は 「.」 (ピリ オド ) に 続け てこ ク ラス 名 を 、ID は 「 持 (シャ ー プ ) に 続け て ID 名 を 指定 
し ます 。 ク ラス 名 と ID 名 に は それ ぞ れ 半角 の 英 数 字 と ハイ フン を 使っ て 任意 の 名 前 を 付け られ ま 
す が 、Netscape (Navigator) で は 1 文字 目 を 数 字 に する と 、 認識 し な いよ う で す の で 、 ク ラ 
ス 名 や ID 名 の 1 文字 目 に 数 字 を つけ る の は 避け る よう に し まし ょ う 。 な お 、 本 書 で は クラ ス 名 、 
ID 名 と いっ た 任意 の 名 前 は 「sg7p/e] の よう に 仙 体 で 表現 し て いま す 。 

「.」 や 「 持 の 前 に 要素 名 を 指定 し て 「 要 素 名 . ク ラス 名 」「 要 素 名 D 名 |] の よう に する と 指定 
され た 特定 の タグ で の み 有 効 に な り ま す が 、 要 素 名 が 指定 され て いな い 場 合 (「. ク ラス 名 」「 提 D 
名 ]) に は どの タグ か ら で も 呼び 出す こと が で きま す 。 

な お 、W3C の 定義 に よれ ば ID は 1 つの HTML 文書 内 で 1 度 し か 呼び 出す こと が で き な い こ 
と に な っ て いま す 。 現状 の ブラ ウザ で は ID で あっ て も 複数 回 呼び 出す こと が で きる よう で す が 、 
これ は 正しい 利用 法 で は あり ませ ん の で 注意 し まし ょ う 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 


"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 任意 の 範 団 に スタ イル を 設定 する </title> 
<style type="text/css"> 
<!-- 
SDan.S77/e7 { color: blue } 
strong が sg/p(e2 { 
color: white: 
background-color: #ff0099 
} 
.S77D/e3 { font-weight: bold } 
が Sg77p/e4 { text-decoration: underline } 
== テ 
</style> 
</head> 
<body> 
<h1> スタ イル シー ト と は </h1> 
<D> 
<Span class="sgp/e7"> ス タイ ル シ ー ト は 、 ひ と こと で 表現 する な ら ば <stronq 
1d="sgp/e2"> 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 ] </strong> と いう こと が で 
きま す 。</span><br> 
スタ イル シー ト を 実現 する <span id="sg 罰 pfe4">CSS (Cascading Style Sheet) 
</span> に は 次 の も の が あり ます 。 
</P> 
<ul> 
<li><strong class="sgp/e3">CSS1</strong> … 1996 年 に 勧告 </i> 
<i><strong class="sg77p/e3">CSS2</strong> … 1998 年 に 勧告 </i> 
</ ul> 
</body> 
</html> 














滞り 衣 剖 2294 ル あ 人 する - Microsoft Internet Explorer 


シー ト は 、 ひと こと で 表現 する な ら ば 還 還 強 イア ウト を 定義 する 技術 」 回 下 
ます . 
5 ト を 実現 する CSS (Cascading Style Sheet) に は 次 の も の が あり ます 。 


* OSS1…1996 年 に 勧告 
* CSS2…1998 年 に 勧告 





人 任意 の 範囲 に スタ イル が 適用 で きま す 


1 1 IE5.5 1 NN4 NN4.7 に ルオ 
O O O O O O O 





※ 定 義 に 反し 、id を 複数 回 呼び 出せ ます 


0 。 = mn 
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@⑯ 3.. タ グ の 相関 関係 で スタ イル を 設定 する 





子孫 の 要素 に 設定 





文 { 全 : へ } 





支 *eeeee 有 要 素 

云 *weee* 子 孫 の 要素 
人 sococoe プ ロバ ティ 
人 へ weeeee 値 


HTML の 木 構造 (p.4 参照 ) を 利用 し 、 そ の 相関 関係 に よっ て スタ イル を 設定 する 方 法 で す 。 

ある タグ ( 親 要 素 ) に 含ま れる 特定 の タグ (子孫 で ある 要素 ) に 対し て スタ イル を 設定 する 場 
合 に は 、 親 要素 の あと に 半角 スペ ー ス で 区 切っ て 対象 の 要素 を 記述 し ます 。 

サン プル で は 、D 要素 に 含ま れる strong 要素 に 対し て スタ イル を 設定 し て いる た め 、span 要 
素 内 に ある strong 要素 に も スタ イル が 適用 され て いま す 。 一 方 | 要素 内 に 含ま れる strong 要素 
に は 適用 され ませ ん 。 





全 サ ンプ ブ ルソー ス の 木 構造 と スタ イル 適用 の 関係 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> タグ の 相関 関係 で スタ イル を 設定 する </title> 

<style type="text/css"> 











<!-- 

.blue { color: blue } 

P strong { 
color: white: 
backqround-color: #ff0099 

} 

ーー テ 

</style> 

</head> 


<bodV> 

<h1> スタ イル シー ト と は </h1> 

<D> 

<span class="blue"> ス タイ ル シ ー ト は 、 ひ と こと で 表現 する な ら ば <strong> 「Web 

ペー ジ の レイ アウ ト を 定義 する 技術 ] </strong> と いう こと が で きま す 。</span> 

スタ イル シー ト を な 実現 する CSS (Cascading Style Sheet) に は 次 の も の が あり ます 。 

</P> 

<ul> 
<li><strong>CSS1</strong> … 1996 年 に 勧告 </> 
<li><strong>CSS2</strong> … 1998 年 に 勧告 </li> 

</ul> 

</bodV> 

</htm> ] 











タグ の 相 関 団 係 スタ イル を 訟 定 する - Microsoft Internet Explorer 
アイ ル (P) 編集 (E) 表示 \) お 気 に 和 0 ツー ル ①D AM ブ ⑪ 


@G*・ の 回 較 @ 用 w 支 bmoo 仙 7p @ 人 六 回 ・ 邊 


スタ イル シー ト と は 


スタ イル シー ト は 、 ひと こと で 表現 する な ら は 加計 床 編 良 
こと が で きま す 。 ス タイ ル シ ー ト を 実現 する CSS (Cascading Style SheeU に は / 
ます 。 


s CSS1…1996 年 に 勧告 
s CSS2…1998 年 に 勧告 











AP> タ グ 内 の <stron9> に の み スタ イル な 競 用 し て いる た め 、 そ の 他 の <strong> に は スタ イル は 適用 され ませ ん 


IE4 国 IE5.5 還 NN4 。 NN4.7 NG6.2 
Oo O Oo o Oo Oo O 





の 00220080 0 20 20 
テレ トト トト トト ニ トト bbb シ ャ ー ニ ニニ ニニ ニニ ニニ トト ーーー 





⑯ 4.. タ グ の 相関 関係 で スタ イル を 設定 する 





直接 の 子 要素 に 設定 





友 > 巡 { 全 : へ } 





*eeeee 親 要素 

寺 ゃ esse 子 要素 

人 ee プロ パテ ィ 
人 へ seeeee 値 


HTML の 木 構造 (D.4) を 利用 し 、 そ の 相関 関係 に よっ て スタ イル を 設定 する 方 法 で す 。 

ある タグ ( 親 要素 ) の 直下 の タグ (直接 の 子 要素 ) に 対し て スタ イル を 設定 する 場合 に は 、 親 
要素 と 対象 の 子 要素 を 「>」 を 挟ん で 記述 し ます 。 

サン ブル で は 、p 要素 の 直接 の 子 要素 で ある strong 要素 に 対し て スタ イル を 設定 し て いま す 。 
その た め 、span 要素 や 要素 内 に 含ま れる strong 要素 に は strong 要素 の 効果 の み で 、 ス タイ 
ル は 適用 され ませ ん 。 





人 る サン ブル ソー ス の 木 構造 と スタ イル 適用 の 関係 








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> タグ の 相関 関係 で スタ イル を 設定 する </title> 
<style type="text/css"> 
1 
.blue { color: blue } 
p > strong { 
color: white: 
background-color: #ff0099 
} 
ーー> 
</style> 
</head> 


<bodV> 
<h1> スタ イル シー ト と は </h1> 
<D テ > 
<span class="blue"> スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば <strong> 「Web 
ペー ジ の レイ アウ ト を 定義 する 技術 ] </strong> と いう こと が で きま す 。</span> 
スタ イル シー ト を 実現 する <strong>CSS (Cascading Style Sheet) </strong> に は 次 の も 
の が あり ます 。 
</P> 
<ul> 
<li><strong>CSS1</strong> … 1996 年 に 勧告 </i> 
<i><strong>CSS2</stronqg> 1998 年 に 勧告 </> 
</ul> 
</bodV> 
</html> 














と を ん は | | 3 ゆみ も と 0 ます: 
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スタ イル シー ト と は 


スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 」 
と いう こと が で きま す .。 ス タイ ル シ ー ト を 実現 する CSS (Cascading Style Sheet) に は 
次 の も の が あり ます 。 


* CSS1…1996 年 に 勧告 
* CSS2…1998 年 に 勧告 








スタ イル シー ト と は 


スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ベ ペー ジ の レイ アウ ト を 定義 する 技術 」 と いう こ 
と が で きま す . スタ イル シー ト を 実現 する SEI(@5RERI 間 SWW 本 】( に は 次 の も の が あり ま 


* GSS1…1996 年 に 勧告 
* OSS2…1998 年 に 勧告 





人 人 <p> タグ 直下 の <strong> タグ に の み ス タイ ル が 適用 され ます 





1 ゴ 】 1 ミコ 1 王寺 】 1 ヨガ NN4 NN4.7 N6.2 


X 2 3 ※ ※ 3 O 
※ Macintosh 版 IE5 は 対応 し て いま す 





2 
上 レレ レト トド トト ド ニ リ リリ リ B⑮⑤ リ リ ョ B 5 ニ pl 


@ 5.. タ グ の 相関 関係 で スタ イル を 設定 する 一 一 隣 接する 要素 に 設定 





HTML の 木 構造 (p.4 参照 ) を 利用 し 、 そ の 相関 関係 に よっ て スタ イル を 設定 する 方 法 で す が 、 
前 述 の 方 法 の よう な 親子 関係 で は な く 、 タ グ の 前 後 関係 に よっ て スタ イル を 設定 し ます 。 

この 方 法 で は 、 同 じ 親 を も ち 、 要 素 (前 要素 ) の 次 に 出現 する 特定 の 要素 ( 後 要素 ) に の み ス 
タイ ル を 設定 する こと が で きま す 。 

サン ブル で は 、ul 要素 の 直後 の p 要素 に の み ス タイ ル が 適用 され 、h1 要素 の 後に くる 要素 に 
は 適用 され ませ ん 。 


^ ム サン ブル ソー ス の 構造 と スタ イル 適用 の 関係 











<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> タグ の 相関 関係 で スタ イル を 設定 する </title> 
<style type="text/css"> 
gl 寺 
ul+pt 
margin:30pt 50pt: 
border-color: gray: 
border-style: dotted 
} 
ー テ > 
</style> 
</head> 


<bodV> 
<h1> スタ イル シー ト と は </h1> 
<D> 
スタ イル シー ト を 実現 する <strong>CSS (Cascading Style Sheet) </strong> に は 次 の も 
の が あり ます 。 
</D> 
<ul> 
<li>CSS1 … 1996 年 に 勧告 </li> 
<li>CSS2 … 1998 年 に 勧告 </li> 
</ul> 
<D> 
W3C は 1996 年 12 月 に スタ イル シー ト 言 語 の ー つ で ある CSS1 (Cascading Style Sheets 
Level 1) を 勧告 し 、Internet Explorer3.0 と Netscape Navigator 4.0 が この 技術 を 導入 し は じ 
め ま し た 。CSS1 で は HTML で 可能 だ っ た デザ イン の ほとん ど を 扱え る よう に な っ て いま す 。 
その 後 1998 年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ ま し た 。</p> 
</bodV> 
</html> 














当 タケ の 相 団 関係 で スタ イル を 設定 する Microsoft internet Explorer 


イル) 編集 GE 表示" お 気に入り ツー ル ① へ ルフ ⑩⑬ 


@ 京 ・ の 回 回 の ws 吉 5m29 仙 77 の 手 ・S 


スタ イル シー ト と は 


スタ イル シー ト を 実現 する CSS (Cascading Style Sheet) に は 次 の も の が あり ます 。 


*CSS1…1996 年 に 勧告 
* OSS2…1998 年 に 勧告 


W3C は 1996 年 12 月 に スタ イル シー ト 言 語 の ー つ で ある OSS1 (Oascading Style Sheets Level 1) を 
勧告 し 、Intemet Explorer3.0 と Netscape Navigator 40 が この 技術 を 導入 し は じ め ま し た 。 OSS1 で 

は HTML で 可能 だ っ た デザ イン の ほとん ど を 扱え る よう に な っ て いま す 。 その 後 1998 年 5 月 12 日 に 

は 次 の 規格 で ある CSS2 が 出さ れ ま し た 。 









4 Intermet Explorer は 対応 し て いま せん 
に - 三 








N タグ の 相関 還 係 で スタ イル を 設定 する - Netscape 6 


| アイル 罰 集 () 表示 ( び 検索 ⑤) ジャ ンプ ⑯ ブッ クマ ー が B) 222D へ ルプ ⑪ 


スタ イル シー ト と は 


スタ イル シー ト を 実現 する CSS (Cascading Style Sheet) に は 次 の も の が あり ます 。 


* CSS1…1996 年 に 勧告 
* OCSS2…1998 年 に 勧告 


介 語 
avel 1) を 勧告 し 、Intermst Explorer3.0 と Netscape Navigator 40 が こ の 技術 を 導入 し は | 





沙 ま し た . CSS1 で は HTML で 可能 AS まし \ ま す 





人 A <ul> タグ に 続く <P> タグ に の み ス タイ ル が 適用 され ます 





1 1 IE5.5 IE6 NN4 NN4.7 に に ルオ 


し 3 し 3 し 3 し X X 〇 
※Macintosh 版 IE5 は 対応 し て いま す 





了 "0 


@ 6.. タ グ の 属性 に よっ て スタ イル を 











文 [$] {人 A: へ } 属性 を 利用 
娘 [人 =" の 中 (人: へ }) 属性 と 値 を 利用 
支 eeee 要 素 名 





人 ee プロ バ パティ 
人 へ weeeee 値 


タグ の 属性 を 利用 し て スタ イル を 指定 する 方 法 で す 。 

友 [| の 形式 で は 属性 の 値 に 関係 な く 、 指 定 さ れ た 属性 を 持つ 要素 に スタ イル を 設定 する こと が 
で きま す 。 一 方 衣 [ 多 =" の 形式 で は 、 指 定 さ れ た 属性 と 値 を 持つ 要素 に の み ス タイ ル を 設定 す 
る こと が で きま す 。 

サン プル で は href 属性 を 持つ a 要 素 す べ て の アン ダー ライ ン を な くし 、 背 景色 に 水色 を 指定 し 
て いま す 。 ま た 、tODP へ の リン ク を 持つ a 要 素 は 文字 サイ ズ と 背景 色 を 変え て いま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htm charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> タグ の 属性 に よっ て スタ イル を 設定 する </tHtle> 
<stvle type="text/css"> 
<!-- 
a[href] { 
text-decoration: none: 
background-color: aqua 
} 
al[href="#top"] { 
font-size: xx-smal 
backqround-color: yellow 
} 
ptitle { 
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font-size: large: 
font-weight: bold 
} 
ーー テ 
</style> 
</head> 


<bodV> 
<p class="title"> ス タイ ル シ ー ト の 設定 方 法 </p> 
<ul> 
<li><a href="#c1"> 外部 スタ イル シー ト を 読み 込む </a></li> 
<li> <a href="#C2">HTML 文書 内 に まとめ て 設定 する </a></l1> 
<li><a href="#c3"> タグ に 直接 スタ イル を 設定 する </a></1> 
</ul> 
<hr> 
<D class="title"><a name="c1"> 外部 スタ イル シー ト を 読み 込む </a></D> 
<D> 
スタ イル の 設定 を 行っ た ファ イル を HTML 文書 と は 別に 用 意 し 、 こ れ を &ltzlink&gt: タ グ で 
読み 込む 設定 方 法 で す 。 
<a href="#top"> 目次 へ 戻る </a> 
</D> 
< class="title"><a name="c2">HTML 文書 内 に まとめ て 設定 する </a></P> 
<PD> 
HTML 文 書 に 設定 し た い ス タイ ル を 記述 する 方 法 で す 。&ltzstyle&gt: と &lt:/style&gt: タ グ 
の 間 で スタ イル を 定義 し 、 こ れ を &ltzhead&gt: 一 &ltz/head&gt: 内 に 配置 し ます 。 
<a href="#top"> 目次 へ 戻る </a> 
</D> 
</bodV> 
</htm> 
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当 タグ の 祖 較 国 任 で スタ イル を 該 定 する 


外部 スタ イル シー ト を 読み 込む 


宇和 っ 20p 拓 本 章介 生 。 これ を <link> タ グ で 読み 込む 設定 方 法 で 
。 且 次 へ 戻る 


HTML 文書 内 に まとめ て 設定 する 


HTML 文 書 に 設定 し た い ス タイ ル を 記述 する 方 法 で す . <style> と </styls> タ グ の 間 で スタ イル を 定義 し 、 
これ を <head>…< く /head> 内 に 配置 し ます 。 目次 へ 戻る 





ぁ グ の 相 較 較 価 で スタ イル を 謎 定 する 








外部 スタ イル シー ト を 読み 込む 


スタ イル の 設定 を 行っ た ファ イル を HTML 文書 と は 別に 用 意 し 、 これ を <link> タ グ で 読み込む 設定 方 法 で す 。 mw 
戻る 


HTML 文 書 内 に まとめ て 設定 する 


HTML 文 書 に 設定 し た い ス タイ ル を 記述 する 方 法 で す . <style> と </style> タ グ の 間 で スタ イル を 定義 し 、 これ を 
<head>…</head> 内 に 配置 し ます 。 mms 








1 】 1 IE5.5 IE6 NN4 NN4.7 に ルオ 
9 ※ ※ X ※ ※ 〇 O 





疑似 クラ ス ・ 疑 似 要 素 


友 : 近 {人 全 : へ } 








ee 要素 名 
ww…… 医 似 ク ラス 、 落 似 要素 
ム ……… プ ロバ ティ 

へ sssees 値 


セレ クタ に は 疑似 クラ ス 、 疑似 要素 と いう も の も あり ます 。 


疑似 クラ ス 
要素 名 や 属性 な ど で 分 類 で き な い 状態 に 対し て スタ イル を 設定 する た め に 、 疑 似 カ ラス と いう 
も の が あり 、 次 の よう な 疑似 クラ ス が 定義 され て いま す 。 要素 名 に 続け て 記述 し て くだ さい 。 
な お 、:hover を リン ク に 設定 する 場合 (a:hover) は 、a:link、a:visitid、a:hover、 
aactive の 順番 に 記述 する 必要 が あり ます 。 


:link まだ 見 て いな い (キャ ッシュ され て いな い ) ペー ジ へ の リン ク 

:visited すでに 見 た (キャ ッシュ され て いる ) ペー ジ へ の リン ク 

:hover マウ スカ ー ソ ル が 要素 と 重かっ て いる と き (まだ アク ティ ブ で は な 
いと き ) 

:active リン ク 部 分 を 選択 し た 瞬間 (クリ ッ ク な ど ) 

:focus 対象 が クリ ッ ク さ れ た と き 

ilang (言語 コー ド ) スタ イル を 適用 させ る 言語 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 疑似 クラ ス </title> 

<style type="text/css"> 

ドコ 

aihink { color: #0000ff } 

aivisited { color: #080 } 
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a:hover { color: rgb(128,000,128) } 
aiactive { color: fuchsia } 

} 

ーー テ > 

</style> 

</head> 


<bodV> 

<p style="font-size: large: font-weight: bold:"> リン ク に スタ イル を 設定 </p> 

<ul> 
<li><a href="sample1.html"> まだ 見 て いな い ペ ー ジ へ の リン ク は 青 </a></li> 
<li><a href="sample2.htmU"> すでに 見 た ペー ジ へ の リン ク は 緑 </a></li> 
<li><a href="sample3.html"> マウ スカ ー ソ ル が 要素 と 重なっ て いる と き は 紫 </a></li> 
<li><a href="sample4.html"> 選択 され た リン ク は 紅 紫 </a></1> 

</ul> 

</body> 

</htm> 











当 蜂 似 カラ ス - Microsoft Internet Explorer 
アイ ル ⑥ 編集 (E) 表示 お 気に入り ⑧⑯ ウール ① へ ルプ ⑬ 


@%・@- 加 還る の es 拓 5mcAo の の | 頒 ・ 生 回 ・ 思 必 "ze 


リン ク に スタ イル を 設定 











^ Internet Explorer の 場合 

















ビュ ッ シ ル 3 1 1 三 】 1 王 た ] 1 コ <】 ドド C4 NN4.7 に ル 4 
ilnk O O O O O O O 
:visited O 〇 O O O も 3 O O 
:active 〇 O C O に 3 ※ O 
:hover 〇 O 有 9 メ メ を 
:focus ※ ※ ※ 96 ※ ※ O 
ilang ※ X も 3 X X 





※ 適 用 する タグ に よ フー 変わ り ま す 
※ Macintosh 版 IE5 は focus に も 対応 し て いま す 


疑似 要素 
木 構 造 を 構成 する 要素 な ど で は 指定 で き な い 部 分 に 対し て スタ イル を 設定 する た め に 、 次 の よ 
うな 疑似 要素 が 定義 され て いま す 。 要素 名 に 続け て 記述 し て くだ さい (D.4 参照 )。 
:first-line 要素 の 表示 上 の 最初 の 1 行 (ブロ ッ ク レ ベル 要素 に の み 指 定 可 能 ) 
:first-letter 要素 の 最初 の 1 文字 (一 部 の ブロ ッ ク レ ベル 要素 に の み 指 定 可能 ) 


:before 要素 の 直前 に 生成 追加 され る 内 容 (content プロ パテ ィ と 併用 ) 
:after 要素 の 直後 に 生成 追加 され る 内 容 (content プロ パテ ィ と 併用 ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift_J1S"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 疑似 要素 </title> 

<style type="text/css"> 

<!-- 

div:first-iine {color: 衣 f0099 }  /*1 行 目 を 赤 紫 に */ 

p:first-letter { /*1 文字 目 を 大 きく */ 
font-size: 300%: 








font-weiqht: bold: 
Ccolor: green: 
float: left 
} 
divibefore  { /* 要素 の 前 に 「Check!」 の 文字 */ 
content: "Check!": 
font-size: x-small: 
color: red 
} 
p:after { /* 要素 の 後に 「OK?」 の 文字 */ 


content:"OK?": 
font-size: x-smalk 
color: graV 





} 
イフ TC バ - ィ ee 


ーー テ > 


</style> 
</head> 


<body> 

<div> 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ の レイ アウ ト を 定義 する 技術 」 
と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 
来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生 
み 出 され まし た 。 

</div> 

<PD> 

W3C は 1996 年 12 月 に スタ イル シー ト 言 語 ひ びー つ で ある CSS1 (Cascading Style Sheets 
Level 1) を 勧告 し 、Internet Explorer3.0 と Netscape Navigator 4.0 が この 技術 を 導入 し は じ 
め ま し た 。CSS1 で は HTML で 可能 だ っ た デザ イン の ほとん ど を 扱え る よう に な っ て いま す 。 
その 後 1998 年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ ま し た 。 

</D> 





</body> 
</html> 





ジ の レイ アウ ト を 定義 する 技術 」 と いう こと 
が で きま す . 講 の 鉛 情 造 に 関す る 提 十 と 体裁 に 関わ る 提 十 と を 分 離さ せ 本 来 HTML の 機能 
で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ ま し た 。 


O は 1996 年 12 月 に スタ イル シー ト 言 語 ひ の ー つ で ある OSS1 (Cascading Style Sheets Level 
1) を 勧告 し 、Intemet Explorer3.0 と Netscape Navigator 40 が この 技術 を 導入 し は じ め ま し 
た . CSS1 で は HTML で 可能 だ っ た デザ イン の ほとん ど を 扱え る よう に な っ て いま す . その後 1998 
年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ ま し た . 


TTP TS 


4 Internet Explorer は : first-letter と : frst-line の み 対 応 し て いま す 








に 4 ま : Netscape 6 
| アイ ル 電灯 表示 検索 GO) ワ ャ ンプ ⑬ プッ マー5( 29(D ヘルプ 


chec ス っ ンー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 」 と いう こと か 
欄 放 [の 講 理 情 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 苑 せ 、 本 来 HTML の 機能 で は な い 
科 の 章 折 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ まし た 。 


609 年 2 月 (EX20K ウ ニ ト 言 語 の 一 つ で ある OSS1 (Cascading Style Sheets Level 1) を 勧告 
し 、Internet Explorer3.0 と Nstscape DBVio 4 0 が この 技術 を 導入 し は じ め ま し た 。 CSS1 で は 


HTML で 可能 だ っ た デザ イン の ほとん ど 
の 規格 で ある CSS2 が 出さ れ まし た 。 ci: 


扱え る よう に な っ て いま す 。 その 後 1998 年 5 月 12 日 に は 次 








4 Netscape 6.2 で は : before と : after に も 対応 し て いま す 














絆 似 要 素 1 1 IE5.5 1 ココ: NN4 NN4.7 ドル 
:first-letter に 3 ※ 〇 1 ※ ※ O 
:first-line に 3 X O O ※ ※ O 
:before ※ ※ ※ X ※ ※ 【⑳」 
:after に 3 2% ※ ※ 3 ※ ON 





※ 適 用 する タグ に よっ て も 効果 が 変わ り ま す 
※ Macintosh 版 IE5 は first-letter、frst-line に も 対応 し て いま す 


筐 2 
レト トト トト トニ トト ーー ニー ニー トニ ニニ トト トト ニニ ーーー トー | 
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STYLESHEET BASIC 





プロ パテ ィ に は 子 要素 に よっ て 値 が 継承 され る も の が あり ます 。 た と えば 、 
body { color : blue } /* ペー ジ 内 の テキ スト の 色 を 青 に 指定 */ 


この よう な 指定 が あっ た 場合 、 特 に 文字 色 の 指定 され て いな い 子 要素 は 、body 要素 の 指定 値 
を 継承 し て 青 で 表示 する こと に な り ま す (た だ し 、 継 承 され る 値 が 相対 値 で 指定 され て いた 場合 
は 、 ま ず 相 対 値 を 絶対 債 と し て 算出 し て か ら 継 承 し ます )。 

値 が 継承 され な い プ ロバ パテ ィ に は 、 背 景 画像 や マー ジン 、 パ ディ ング の 指定 な ご が あり ます 。 
た と えば 、 


div { margin: 5pt }) /*div 要 素 の マー ジン を 5pt に 指定 */ 


と いう 指定 を し た 場合 、div 要素 の マー ジン は 5pt に な り ま す が 、 マ ー ジ ン の 値 は 継承 され な 
いた め 、 こ の 要素 内 の 子 要素 や 子孫 の 要素 に マー ジン を 設定 し た い 場 合 に は 、 新 た に 該当 の 要素 
に 対し て スタ イル を 指定 する 必要 が あり ます 。 

プロ パテ ィ の 値 が 継承 する か どう か に つい て は 、 付 録 の 「 適 用 ・ デ フォ ルト ・ 継 承 一 覧 ] を 参 
照 し て くだ さい 。 

また 、 難 プロ パティ に は 「inherit] と いう 値 を 指定 する こと で 、 通 常 は 値 を 継承 し な い 要素 で 
も 、 強 制 的 に 親 要 素 の 値 を 継承 させ る こと が で きま す 。 









MM は 】」 け 1 目 け ト 】【 





スタ イル シー ト で は 、 す べ て の 要素 は ボッ クス と 呼ば れる 四角 い 領 域 を 持つ と 考え 、 こ の 領域 
や 領域 を 囲む 枠 線 に 対し て 大 き さ や 色 ・ 位 置 の 指定 を する こと で スタ イル を 変更 し ます 。 ボ ッ ク 
ス は 内 容 領域 ・ マ ー ジ ン ・ パ ディ ング ・ 枠 線 の 4 つの 部 分 か ら 構 成 され て お り 、 図 の よう な 構造 
に な っ て いま す 。 





こう し た 概念 を た 用 いる こと で 、 枠 線 ・ 枠 線 と 要素 の 余白 ・ 枠 線 の 外側 の 余 白 … 上 下 左右 と いっ 
た よう に 細か く ス タイ ル が 設定 で きま す 。 


内 容 領域 
テキ スト や 画像 な ど 、 要 素 の 内 容 が 表示 され る 領域 で す 。 width プロ バテ ィ や height プロ パテ ィ 
で サイ ズ を 指定 する こと が で きま す 。 


パ デ ィ ン グ 
要素 の 内 容 が 表示 され る 部 分 と 枠 線 と の 間 の 余白 領域 で す 。 要素 の background-Color プロ パ 
ティ で 指定 し た 背景 色 は この 部 分 に も 適用 され ます 。 


枠 線 
要素 の 周り に 表示 され る 枠 で 、 バ ディ ング の 外側 に 設定 され ます 。 


マー ジン 

桁 線 の 外側 に 設定 され る 余白 領域 で す 。 要 素 の background-color プロ バテ ィ で 指定 し た 背景 
色 は この 部 分 に は 適用 され ず 、 背 景 は 常に 透明 に な り ま す 。 そ の た め 、 親 要 素 に 背景 が 設定 され 
て いる 場合 に は 、 そ の 背景 が 透け て 見 える こと に な り ま す 。 


背景 色 ・ 背 景 画像 
内 容 領域 と バディ ング 領域 ( 枠 線 の 内 側 ) に 表示 され る 色 や 画像 で す 。 


MI 上 ト ]【e 





スタ イル シー ト で 長 さ を 指定 する に は 、 相 対 単位 で 指定 する 方 法 と 絶対 単位 で 指定 する 方 法 の 
2 通り あり 、 そ れ ぞ れ 以 下 の 単位 が あり ます 。 


相対 単位 








| em  : その 要素 の fontsize の 値 を 1 と する | h1 { margin: 0.5em ) : 
し ki ーー ニー ニー ニー ューーーーー こ = ミニ ニー ニニ ニー ニュ ニニ ミニ ュー ト ーーー ニー ニニ ーー ニー 9 に ーー エゴ フー スコ 
人 で h1 { margin: 1ex } 
| px  : コン ピュ ー タ 画面 よ の 1 ビク セル を 1 と する 。 :p { font-size: 12px ) 
| 9% | 多く の 場合 は 親 要素 の 部 分 を 時 準 と し た 割合 「! 。 
11 . 因 WEAoSAga) 。 1PtW2ew120M1i 
絶対 単位 









イン チ (1in=2.54cm) 


ーー ニー ニニ ーー ニー こさ ニー ニニ = ニニ ニー ニニ ニニ ニニ ニニ ニニ ニニ ニー ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニュ ここ ニニ ーー 


) h1 { margin: 0.5in } 








STYLESHEET BASIC 





スタ イル シー ト で 色 を 指定 する に は 、RGB 値 を 用 いる 方 法 と 、 キ ー ワ ー ド を 用 いる 方 法 と が あ 
り 、 そ れ ぞ れ 次 の よう に 指定 し ます (具体 例 は いずれ も 赤 を 指定 する 場合 で す )。 

な お 、 ブ ラウ ザ に よっ て は 対応 し て いな い 指 定 方 法 や 色 も あり ます 。 注意 し て 使用 する よう に 
し まし ょ う 。 


ste1:lltF る | か コ 


#rrggbb 

「# に つづ け て 赤 (r)、 緑 (9)、 青 (D) の それ ぞ れ の 値 を 00 一 ff の 16 進数 で 2 桁 ず つ 、 計 
6 桁 で 指定 し ます 。 

例 : 衣 f0000 


#rqgb 

「# に つづ け て 赤 (r)、 緑 (9)、 青 (D) の それ ぞ れ の 値 を 0 一 f の 16 進数 で 1 桁 ず つ 、 計 3 
桁 で 指定 し ます 。 こ の 方 法 で は rgb 加 桁 を 2 つ 繰 り 返し て 並べ た 6 桁 の 形式 (rggDb) に 変換 
され て か ら 色 が 表現 され ます 。 た と えば 「 掛 D0] と いう 値 は 「ffDD00]」 と いう 値 に 変換 され る 
こと に な り ま す 。 

例 : 胡 00 


rgb(n,n,n) 

rgb に つづ く 「0」 の 中 に 赤 (r)、 緑 (9)、 青 (D) の それ ぞ れ の 値 を 「,」 で 区 切っ て 10 進数 
の 整数 で 指定 し ます 。 

例 : rgb(255,0,0) 


rgb(n%,n%,n%) 

rgb に つづ く 「0」 の 中 に 赤 (r)、 緑 (9)、 青 (D) の それ ぞ れ の 値 を 「,」 で 区 切っ て パー セン 
ト で 指定 し ます 。 

例 : rgb(100%,0%.0%) 
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キー ワー ド に よる 指定 


色 名 に よる 指定 

色 名 で 直接 指定 し ます 。 大 文字 と 小文字 は 区 別 さ れ ま せん 。HTML4.01 で は 基本 的 な 16 色 が 
定義 され て いま す 。 

基本 的 な 16 色 に つい て は 下 表 を 、 そ の 他 の 色 名 に つい て は p.342 の カラ ー チ ャ ー ト を 参照 し 
て くだ さい 。 


#000080 , qreen #OO8000, black #000000 


FU: りり 


purple #800080 olive #80800 


maroon #800000 teal  #O08080. white Hffffff ! 





シス テム カラ ー に よる 指定 

スタ イル シー ト で は 、Windows や MacOS が 保持 し て いる シス テム 情報 を 呼び 出す こと が で 
きま す 。 こ の シス テム カラ ー を 使う と 、 ペ ー ジ を 見 る 人 の OS の 環境 に 合わ せ て 使用 色 を 決め る 
こと が で きま す 。 

シス テム カラ ー に は 以下 の キー ワー ド が あり ます 。 


activeborder アク ティ ブ な ウィ ンド ウ の 枠 の 色 
activecaption アク ティ ブ な ウィ ンド ウ の タイ トル バー の 色 
apPWorkspace アプ リケーション 内 の ウィ ンド ウ の 背景 色 
backqround デス クト ッ プ の 背景 色 

buttonface 立体 的 ボタ ン の 表面 の 色 

buttonhighlight 立体 的 な ボタ ン の 光 の あたっ て いる 面 の 色 
buttonshadow 立体 的 な ボタ ン の 影 に な っ て る 面 の 色 
buttontext 立体 的 な ボタ ン の テキ スト の 色 

captiontext タイ トル バー の テキ スト の 色 

graytext 選択 で を な い テ キス ト の 色 

hightight 選択 し て いる 状態 の 色 

highlighttext 選択 し て いる テキ スト の 色 

inactiveborder アク ティ ブ で な い ウ ィ ン ド ウ の 枠 の 色 
inactivecaption アク ティ ブ で な い ウ ィ ン ド ウ の タイ トル バー の 色 
inactivecaptiontext アク ティ ブ で な い ウ ィ ン ド ウ の タイ トル バー の テキ スト の 色 
infobackqround ツー ル チ ッ プ の 痛 景色 

infotext ツー ル チ ッ プ の テキ スト の 色 

menu メニ ュー の 背景 色 


スタ イル シー ト に お ける 双 


menutext メニ ュー の テキ スト の 色 


scrollbar スク ロー ル バ ー の 色 

threeddarkshadow 立体 的 に 表示 され る 部 分 の 暗い 影 の 色 

threedface 立体 的 に 表示 され る 部 分 の 表面 の 色 
threedhighiight 立体 的 に 表示 され る 部 分 の 光 の あたっ て いる 面 の 色 
threedliqhtshadow 立体 的 に 表示 され る 部 分 の 明る い 影 の 色 
threedshadow 立体 的 に 表示 され る 部 分 の 影 の 色 

window ウィ ンド ウ の 背景 色 

windowframe ウィ ンド ウ の フレ ー ム の 色 

windowtext ウィ ンド ウ の テキ スト の 色 








デス クト ッ プ の 背景 色 
アク ティ ブ で な い タ イト ル バ ー の 人 色 
アク ティ ブ な タイ トル パー の チキ スト の 公 





アク ティ ブ で な い タ イト ル バ ーd 
アク ティ ブ な タイ トル バー の テキ スト の 何 





デス クト ッ プ の 背景 色 





アク ティ ブ な タイ トル パー の テキ スト の 色 


デス クト ッ プ の 痛 景色 








る 


アク ティ ブ な タイ トル バー の チキ スト の 公 


人 ムシ ステ ムカ ラー に よる 指定 は 、OS の 違い な ど マ シン の 環境 に よっ 
て 異な り ま す 


transparent の 指定 

プロ パテ ィ に よっ て は transparent (透明 ) を 指定 で きる も の も あり ます 。 transparent を 指 
定 する と その 領域 は 透明 に な り 、 結 果 と し て その 要素 が 含ま れる 親 ボ ックス の (つま り 下 の ) 内 
容 や 背景 ・ 背 景 画像 な ど が 透け て 見 える よう に な り ま す 。 





STYLESHEET BASIC 





スタ イル シー ト で URL や ファ イル の 位置 を 指定 する 場合 に は 、「url0」 を 使用 し ます 。URL は 
引用 待 (「" "」「' '」) で くく る こと も で き 、 ま た URL の 前 後に は 空白 スペ ー ス を 入れ る こと も で 
きま す 。 

例 : url(http://www.ank.co.jp/) 

url("./books/css.htmU'") 


URI と URL CECCCCCCOYY て し 


URL を 指定 する に は 、 あ る ファ イル の 位置 を 一 番 も と に な る 位置 か ら 階層 構造 を 順番 に た どっ て 指定 
する 絶対 URL と 、 フ ァイル 同士 の 位置 を 、 基 準 と な る ファ イル か ら 見 て どこ に ある か 、 階 層 の 上 下 を 表 
すこ と で 指定 する 相対 URL の 2 通り の 方 法 が あり ます 。 主 に 、 絶 対 URL は 他 の サイ ト に ある ファ イル を 
指定 する 場合 、 相 対 URL は 自分 の サイ ト 内 に ある ファ イル を 指定 する 場合 に 使用 し ます 。 も ちろ ん 、 自 
分 の サイ ト 内 の ファ イル に 絶対 URL を 指定 する こと も 可能 で す が 、 オ ン ラ イン の 状態 で 使用 する こと や 、 
フォ ル ダ ご と 移動 させ た い 場 合 の こと を 考慮 する と 、 相 対 URL で 記述 し て お いた ほう が 便利 で し ょ う 。 

な お 、HTML4.0 か ら は 「URL」 に 代わ っ て より 広義 な 「URI (Universal Resource Identifers)」 と 
いう 用 語 が 使用 され る よう に な っ て いま す 。URL と 同様 に HTML 文書 ・ 画 像 ・ ビ デオ クリ ッ プ ・ プ ログ 
ラム な ど を 指定 で きま す が 、URL は URI の サブ セッ ト で URI の ほう が 上 位 の 概念 で す 。 

本 書 で は 、 読 者 に と っ て 馴染 み の 深い と 思わ れる URL を 使用 し て いま す が 、URI と する の が 正しい 表 
現 で す の で 、 ぜ ひ 覚 えて くだ さい 。 


し し た ルル メメ メメ メメ エナ オメ エミ エエ エミ メメ ミエ メ オオ オオ メメ IIIIIIIITKIKLAAAAKYIIKIKKKKKKKKKYYKKKKKKKKYEKEEEI 





STYIESHEET BASIC 





従来 の Internet Explorer や Netscape で は 、HTML 文書 の 冒頭 に 記述 する 文書 型 宣言 
(<!DOCTYPE>) の 有無 や 、 文 書 型 宣言 の 後 ギ の URL 部 分 を 省略 する か どう か と いっ た 表記 の 
違い が 、 コ ン テ ン ツ の 表示 に 直接 影響 与え る こと は あり ませ ん で し た 。 し か し 、Windows 版 
の Internet Explorer 6、Mac 版 Internet Explorer 5.x、Netscape 6 以降 で は 、 以 下 の 2 通 
り の 表示 モー ド が 用 意 され 、 文 書 型 宣言 の 書き 方 で これ ら の 表示 モー ド が 切り 替わる 仕組 み に な 
っ て いま す 。 


標準 準拠 モー ド 
W3C の 標準 仕様 に 従っ て 正しく 表示 を する 


互換 モー ド 
旧 バ ー ジ ョ ン と の 互換 性 を 考慮 し 従来 の ブラ ウザ と 同様 の 表示 を する 


表示 の 違い が 現れ る の は 主 に スタ イル シー ト を 利用 し た 時 で す が 、HTML だ け で 文書 を 作成 し 
た 場合 に も 多少 の 影響 が 出 ま す の で 注意 し て くだ さい 。 
HTML4.01 の DOCTYPE 宣言 の 記述 方 法 と 、 表示 モー ド と の 関係 は 次 の よう に な っ て いま す 。 





2 | | 換 
! <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
0 「 "http//Wwwww3.0rg/IR/htmM4/stnctdtd> : 標準 : 標準 : 標準 
rIC 
| 4D0CPE HTNL PUBC "//W3C7/DTD HTML 4.01//EW> | 標準 | 林 | 
1 ! <UDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" " 1 
縛 織 01 | "http://Wwwrw3.0rg/TR/html4/oose.dtd> 1 栖 夫 、 舞 | 林 準 | 
afSIKIOII に ---- ーー ニー ニニ ニニ ニニ ニー ニニ ニニ ニー ニー ニー ニー ニー ニー ニニ ニニ ニニ ニニ ニニ ニー ニニ ニニ ニニ ニニ ニニ ーー ニム ニニ ニニ ご ニニ ニニ ニム ニニ ニー ニー 


た と えば 、 文 書 型 宣言 の 記述 方 法 以外 は まっ た く 同 じ 内 容 を 持つ 以下 の サン ブル を 、 ブ ラウ ザ 
に 表示 させ る と 次 の よう な 違い が 現れ ます 。 











URL を 省略 は ず に DTD を 宣言 標準 準拠 モー ド 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<title> 標準 準拠 モー ド の テス ト </title> 
<style type="text/css"> 
<!-- 
div 人 { 
width: 300px: 
padding: 20px: 
border: dotted 3px #880000 
} 
ビー っ 
</stvle> 
</head> 


<body> 

<h1> 標準 準拠 モー ド </h1> 

<div> 

Web ペー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を 示す 言語 で す 。 た と えば 、 見 出し が 
あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの よう な 要素 で 構成 さ 
れ て いる の か 、 ま た お ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を 、 
コン ピュ ー タ に 知ら せる た め の 言 語 な の で す 。 表現 方 法 を 指定 する た め の 言 語 で は あり ませ 
ん 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レ イア ウト の た 
め の テ ー ブ ル の 利用 な ど 、 文 書 の 体裁 、 つ まり 見 栄え まで も 定義 むす る よう に な っ て いき まし 
た 。W3C で は この 状況 を 改め る た め 、 構 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 
HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り ま し 
た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の が スタ イル シー ト の 概念 で す 。 

</div> 

</body> 

</htm> 








itc 














URL を 省略 し て DTD を 宣言 : 五 換 モー ド 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<title> 互換 モー ド の テス ト </ せ itle> 
<stvle type="text/css"> 
<!-- 
div { 
width: 300px: 
padding: 20px: 
border: dotted 3px #880000 
} 
ーー テ 
</style> 
</head> 


<bodV> 

<h1> 互換 モー ド </h1> 

<diV> 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を 示す 言語 で す 。 た と えば 、 見 出し が 
あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの よう な 要素 で 構成 さ 
れ て いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を 、 
コン ピュ ー タ に 知ら せる た め の 言 語 な の で す 。 表 現 方 法 を 指定 する た め の 言 語 で は あり ませ 
ん 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レ イア ウト の た 
め の テ ー ブ ル の 利用 な ど 、 文 書 の 体裁 、 つ まり 見 栄え まで も 定義 する よう に な っ て いき まし 
た 。W3C で は この 状況 を 改め る た め 、 構 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 
HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り ま し 
た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の が スタ イル シー ト の 概念 で す 。 

</div> 

</bodV> 

</htm> 
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当 苦 準 準 提 モ ー ド の テス ト - Microsoft Internet Explorer 
アイ ル () 編集 表示 お 気に入り ① ッ ウール ①D ヘル プ ⑬ 


の 回 回 の の 5moo 6 
標準 準拠 モー ド 


Web ペ ー ジ を 記述 する HTM_ は 、 文書 の 論理 
的 な 構造 を 示す 言語 で す 。 た と え (ば 、 見 出し 
が あり 、 本 文 の 中 に 段 政 や リス ト が あり 
: と いい っ た よう に 、 文書 が どの よう な 要素 で 構 
: 成 さ れ て いる の か 、 ま た ある 特定 の 部 分 が 文 
: 書 全体 の 中 で どの よう な 意味 を も っ て いる の 
: か を 、 コ ンピュータ に 知ら せる た め の 言語 な 
の で す 。 表現 方 法 を 指定 する た め の 言 語 で 
は あり ませ ん 。 し か し 実際 は 、 Wsb の 発展 に 
と も な い 、 色 や フォ ント サイ ズ の 指定 、 レイ ア 
ウト の た め の テ ー ブ ル の 利用 ね ど 、 文書 の 体 
裁 、 つま り 見 栄え まで も 定義 する よう に な っ て 





の さ せ 、 
御 に つい て は 別 の 方 法 を 導入 し よう と 老 え る 
よう に な り ま し た 。 こう し た 姿 勧 の も と に 生み 
出さ れ た の が スタ イル シー ト の 概念 で す 。 


ーー Phrmmr サ "TEFW "Fe ネコ ay 





人 標準 準拠 モー ド 。 内 容 領域 の サイ ズ が width に よっ て 設定 され ます 


鹿 五 換 モー ド の テス jicrosoft Internet Explorer 


は 、 文書 
の 計 0: 千 を テオ 計 同 で す 。 た と 
えば 、 見 出し が あり 、 本 文 の 中 に 彼 誰 
と いっ た よう に 文 
書 が どの よう な 要素 で 構成 され て いる 
| の か 、 ま た ある 特定 の 部 分 が 文書 全 
休 の 中 で だ の よう 2 味 をもって いる 
の か を 、 コ ンピュータ に 知ら せる た め 
: の 言語 な の で す 。 指定 す 
る た め の 言 語 で は あり ませ ん 。 し か し 
: 実際 は 、Web の 発展 に と も な い 、 色 や 
フォ ント サイ ズ の 指定 、 レ イア ウト の た 
め の テ ー ブ ル の 利用 な ど 、 文書 の 価 
、 つま り 見 栄え まで も 定義 みす る よう 
( こ ぉ っ て いき まし た , WC で (は この 状 
況 を 改め る た め 、 構造 に 関す る 指定 と 
体 戴 に 関わ る 指定 と を 分 離さ せ 、 
HTM の 機能 で は な い 体 吉 の 制御 に 
つい て は 別 の 方 法 を 導入 し よう と 才 え 
る よう に な り ま し た 。 こ うし た 姿勢 の も 
| と に 生み Hb き れ た の が スタ イル シー ト 





全 旦 換 モー ド 。 内 容 領 域 に パ デ ィ ン グ と 枠 線 を 加え た 領域 の サイ ズ が width に よっ て 設定 され ます 


54 2 
トレ レト ドド トド トト トト ト 66BBB レ b ト レト トト b ド b ッ トペ 。- ニニ トニ トム bb ヘム ヘ へ ヘ -Q。 


“ エア 94』 ゴ 1 
フォ ント /FONT 

音 景 BACKGROUND 

ジル ル 9/ 

Eh 4 に ININIS 

リル 49/ に 3 

テー ブル /TABLE 

フィ ル タ /FILTER 


その 他 /OTHER 





スタ イル シー ト 
リ ァ ルレ ジン アル < 





テキ 中 


colors 文 





文 *eeeeRGB 値 
キー ワー ド 





文字 色 を 指定 し ます 。 

色 の 指定 に は 、RGB の 数 値 で 指定 する 方 法 と 、 キ ー ワ ー ド で 指定 する 方 法 と が あり ます 。 色 の 
詳し い 指定 方 法 に つい て は p.47 を 参照 し こく だ さい 。 

な お 、 色 の 指定 が され て いな い 文 字 に は 、 ユ ー ザ ー の ブラ ウザ の 設定 に し た が っ た 色 が 表示 さ 
れ ま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 文字 色 を 指定 し た い </title> 

<style type="text/css"> 

<! に = 

body { background-color: black } 

・Sg77//e7 { color: 計 f0000 } 

.S77//e2 { color: TfO0ff } 

.Sg77D/e3 { color: #008800 } 

.S077/e4 { color: 針 ff } 

.Sg77/e5 { color: #0f0 } 

・S77//e6 { color: #00f } 

-S77//eZ { colors rgb(128.0,0) } 

・Sq77/e8 { color: rgb(255,255,0) } 

Sg77/e9 { color: rgb(0,128,128) } 








[1 信 文字 色 を 指定 し た い SW で は Se 2 か JR テー 5 3 デイ 





-sg7p/e70 {color: rgb(75%,75%,75%) } 
sg77p/e77 {color: rgb(50%,0%,.50%) } 
spfe72 人 し color rgb(0%,0%,50%) } 


Se73 {color: gray } 
sg77//e74 人 color: oiive } 
.s77p/e75 人 color: aqua } 

ー テ > 

</style> 

</head> 

<bodV> 

<D テ > 

<sDan Class= "sp/e7"> テ ェ </span> 
<span Class="sg7p/e2"> キ </span> 
<SDan class="sg/7D/e63"> ス </SDan> 
<sDan class="sg77p/e4"> ト </span> 
<SDan class="sg7p/e5"> の </span> 
<sDan class="sg77p(e6"> 色 </span> 
<span class="sg/7p/e/"> を </span> 
<SDan class="sg/p/e8"> 変 </sDan> 
<SDan class="sg//e9"> 更 </span> 
<SDan class="sgp/e70"> し </span> 
<SDan class="sg/7p/e77"> て </span> 
<sDan class="sg7p/e72"> み </Span> 
<sDan class="sg7p/e73"> ま </Span> 
<SDan class="sg/7p/e74"> す </SDan> 
<SDan class="sg7p/e75">。</sDan> 
</P> 

</ body> 

</html> 








テバ | キ 中 
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アイ ル (F) 編集 CE) 表示 ず ) お 気 に AD(⑯ ツール ①D ヘル プ ⑪ 


③ 束 - x| 久 ぬ の es 天 5m2p 困 な g で 


人 め イン ター ネッ ト 











58 文字 色 を 指定 し た い 


[ 文字 色 を 指定 する HTML タグ を CSS に 改め る は GAAAAAAKAALACCICD トコ 
HTML タグ で テキ スト の 色 を 指定 する に は 、 次 の よう に <body> タグ また は <font> タグ の 属性 を 利用 に 

し ます 。 ト 

<body text=" 友 "> ーー</body> 標準 の 文字 色 

<body ink=" 衣 "> 一 </body> まだ 見 て いな い ペ ー ジ へ の リン ク 部 分 の 色 

<body alink="">ー</body> リン ク 部 分 を 選択 し た 瞬間 の 色 

<body vlink=" 廊 "> </body> すでに 見 た ペー ジ へ の リン ク 部 分 の 色 

<font color=" 衣 "> 一 </font> 部 分 的 な テキ スト の 色 指 定 

支 一 色 の 指定 値 


HTML タグ の 文字 色 を 指定 する 属性 は すべ て Deprecated (推奨 し な い ) と され て お り 、 代 わり に スタ 
イル シー ト で 指定 する こと が 推奨 され て いま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に 
な り ま す (疑似 クラ ス に つい て は Dp.39 参照 ) 




















body { color:} 標準 の 文字 色 

ailink {color: 文 } まだ 見 て いな い ペ ー ジ へ の リン ク 部 分 の 色 

aiactive {color: 文 } リン ク 部 分 を 選択 し た 瞬間 の 色 

aivisited {color: 支 } すでに 見 た ペー ジ へ の リン ク 部 分 の 色 

{color: 文 } 部 分 的 な 文字 色 の 指定 (ーー セ レク タ ) 

太一 色 の 指定 値 

1 1 王 】 IE5.5 1 ゴゴ ドド し? NN4.7 ド [ に ルコ 

色 名 O O O O O O O 
ジス テム カラ ー O O O O メ ※ O 
gb O O O O O O O 
jrgdbb O O O O O O O 
rgb(mmn) O O O O O O O 
rgb(n%n%.n%) O O O O O O O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


や 背景 色 を 指定 し た い ………… バ ーー ドー p.136 
背景 画像 を 指定 し た い ………… ド ドー p.140 





テ せ 下 


text-decoration: 文 





支 eeees キ ー ワ ー ド 





指定 し た 要素 に 含ま れる 文字 に 対し て 、 上 線 、 下 線 、 取 り 消し 線 、 点滅 と いっ た 装飾 を 設定 し 


ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
overline 上 線 
underline 下線 
Hine-through 取り 消し 線 
blink 点滅 
none 装飾 な し (デフ ォ ル ト ) 


それ ぞ れ を 半角 スペ ー ス で 区 切っ て 並べ れ ば 、 複 数 の 値 を 指定 する こと も で きま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona/EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 文字 を 装飾 し た い </title> 
<stvle type="text/css"> 
<!-- 
PD.sg77p/e7 {text-decoration: none } 
P.sg77/e2 人 
text-decoration: overline underline: 
color: red 
} 
P.sg77p/e3  { 
text-decoration: ine-through: 











委 し た い 。 





color: blue 
} 
p.sg7pe4  { 
text-decoration: blink: 
color: green 
} 
ーー テ 
</style> 
</head> 
<bodV> 
<P class="sg7p/e7">text-decoration: none 装 節 な し (デフ ォ ル ト ) </P> 
<P class="sgp/e2">text-decoration: overine underine で 上 線 と 下線 を 指定 </P> 
<P class="sgp/e3">text-decoration: ine-through で 取り 消し 線 を 指定 </p> 
<D class="sg/p/e4 ">text-decoration: bink で 点滅 を 指定 </p> 
</ body> 
</html> 








中 文字 を 装 飼 し た い - Microsoft Internet Explorer 
カイル) 編集) 表示 お 気に入り ツー ル ① AM プ ⑧ 


Os の 回 回 の @ の we 京 pm 仙 7 の の 人 
text-deooration' none 装飾 な し (デフ ォ ル ト ) 


taxt-deooration_overline underinse で 上 線 と 線 を 指定 


ーー っ ロ ヒー っ 

















ド 文字 を 装 師 し た い - Netscape 6 


| アイ ル (6 編集 表示 検索 ジャ ンプ 6③ プッ クマ ー2(B) 222① ルプ ⑪ 





川 N htp//www shoeishacom/book/pc/t/css/text/text02htm53 認 











テキ 





1 HTML タグ で 文字 を 装飾 する に は 、 次 の よう な タグ を 利用 し ます 。 
1 <U> ーー</U> 下線 

<strike> --</strike> 取り 消し 線 

<S> ーー</s> 取り 消し 線 

<blink> 一 </bhink> 点滅 


<Strike>、<s>、<u> タグ は 、Deprecated (推奨 し な い ) と され て お り 、 こ うし た 文字 の 装飾 は スタ 
イル シー ト で 指定 する こと が 推奨 され て いま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に 
な り ま す 。 
文 { text-decoration: underline } 下線 
友 {text-decoration: tine-though } 取り 消し 線 
支 { text-decoration: line-though 1 取り 消し 線 

















支 {text-decoration: blink } 点 減 
支 ニ 一 セ レク タ 
1 1 王 】 1 大 -】 1 ココ NN4 ドド し 守 4 ド に ルイ 
none O O O O O O O 
overline O ゆ O O も 3 ※ O 
underline 〇 O O O O O O 
line-through O O O O O O 〇 O 
bink し 3 ※ ※ も 3 O O 〇 ※ 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
縦 書き の 下線 ( 傍 線 ) 位置 を 指定 し た い ………・…・ p.10g 
牧 フォ ント を 謀 体 に し た い … ド ーー ドー p.126 








text-transform: 文 





支 eeeee キ ー ワ ー ド 





英文 の 大 文字 ・ 小 文字 の 表記 方 法 を 指定 し ます 。 英文 を すべ て 大 文字 (ある い は 小文字 ) で 表 
示し た り 、 単語 の 一 文字 目 を 大 文字 で 表示 し た りす る こと が で きま す 。 


値 に は 以下 ひ O キ ー ワ ー ド が あり ます 。 


capitalize 各 単 語 の 1 文字 目 を 大 文字 に 置換 
upDDercase すべ て の 文字 を 大 文字 に 置換 
lowercase すべ て の 文字 を 小文字 に 置換 

none 入力 され た まま で 表示 (デフ ォ ル ト ) 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 大 文字 ・ 小 文字 に 置換 し た い </title> 
<style type="text/css"> 
<!-- 
div { 
marqin: 20pt auto: 
text-transform: none 


} 

-Sg77D/e7 { 
text-transform: capitalize: 
color: red 

} 


大 文字 ・ 小 文字 に 置換 し た い 


テ せ 中 


63 


テキ 


64 





.Sg77//e2 { 
text-transform: uDpercase: 
color: blue 
} 
・S077(e3 { 
text-transform: lowercase: 
color: green 
} 
== テ 
</style> 
</head> 
<bodV> 
<diV> 
text-transform: capitalize<br> 
<SDan class="sg/p/e7 ">the text-transform property controls capitalization effects of an 
element's text, </span> 
</ div> 
<diV> 
text-transform: uppercase<br> 
<Span class="sg7p/e2">the text-transform property controls capitalization effects of an 
element's text. </sDan> 
</div> 
<diV> 
text-transform: lowercase<br> 
<SDan class="sg7/e3">THE TEXT-TRANSFORM PROPERTY CONTROLS 
CAPITALIZATION EFFECTS OF AN ELEMENT'S TEXT.</span> 
</div> 
</bodV> 
</html> 





大 文字 ・ 小 文字 に 置換 し た い 





text-transform. capitalize 
The Text-Transform Proparty Controls Capitalization Effects Of An Elemant'is Text 


text-transforrm. upperCgS@ ら 
THE TEXT-TRANSFORM PROPERTY CONTROLS CAPITALIZATION EFFECTS OF AN 
ELEMENTS TEXT 


text-transformm Iowercase 
1he text-transform property controls capitalization effects of an elsrmant's text 











文字 に 証人 諾 し た い - Netsca 


text-transform capitalize 
Th Taxt-transform Fropsrty Oontrols Capitalization Effects Of An Element's Text 


text-transform upperCaS ら 
THE TEXT-TRANSFORM PROPERTY CONTROLS CAPITALIZATION EFFEOTS OF AN 
ELEMENTS TEXT 


text-transform. lowercas 
the text-transform proparty controls capitalization effcts of an elemant's text 

















1】 1 1 王 其 -]】 1 ヨコ ドド し 3 ド 、C 完 4 N6.2 
capitalize O O O O ※ メ O 
uppercase O 〇 O O メ ※ O 〇 
lowercase O O O O ※ し 3 O 
none O O O O 〇 ※ ※ 〇 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


文字 に スモ ー ル キャ ピタ ル を 指定 し た い ………・…… p.128 


テ ^ せ 中 





アキ 
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iine-heiqht: 文 





文 *eecce キ ー ワ ー ド 
サイ ズ を 表す 数 値 + 単位 
割合 を 表す 数 値 
バー セン ト を 表す 数 値 +% 





行 の 高 さ ( 行 送 り ) を 設定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


キー ワー ド 
normal ブラ ウザ が 自動 的 に 行 の 高 さ を 設定 (デフ ォ ル ト ) 


サイ ズ を 表す 数 値 十 単位 

ボッ クス 領域 の 高 さ (1 行 の 上 端 か ら 下 端 まで の 幅 ) を 、 数 値 に 単位 を つけ て 設定 し ます 。 フ 
ォ ン ト サ イ ズ が 12pt の と き に 12pt や 1em を 設定 する と 行間 が 0 に な り 、 ま た フォ ント サイ ズ 
が 12pt の 時 に 10pt を 設定 する と テキ スト が 次 の 行 に は み 出 し て し まい ます の で 注意 し て くだ さ 
い 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 


割合 を 表す 数 値 (単位 な し ) 

その 要素 の フォ ント サイ ズ (その 要素 に 設定 され て いる サイ ズ や 親 要 素 か ら 継承 し て きた サイ 
ズ ) に 対す る 行 の 高 さ の 割合 を 、 単 位 な し の 数 値 で 設定 し ます 。 た と えば フォ ント サイ ズ が 10px 
の と き に 1.5 を 設定 する と 、 行 の 高 さ は 15px と な り ま す 。 


パー セン ト を 表す 数 値 二 % 
その 要素 の フォ ント サイ ズ (その 要素 に 設定 され て いる サイ ズ や 親 要 素 か ら 継 承 し て きた サイ 
ズ ) に 対す る 行 の 高 さ の 割合 を 、 バ ー セ ン テ ー ジ で 設定 し ます 。 


次 の 指定 は いずれ も 同じ 結果 に な り ま す 。 
div { font-size: 10pt: line-height: 1.2em } 
div { font-size: 10pt: Hine-height: 1.2 } 
div { font-size: 10pt: line-height: 120% } 


行 の 高 さ を 設定 し た い 


Lei 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 行 の 高 さ を 設定 し た い </title> 
<stvle type="text/css"> 
<!-- 
div { 
font-size: 16pt: 
marqin: 20px auto 20px 20px: 
width: 500px: 
padding: 20px: 
backqround-color: #ff9966 
} 
-S0/7/e7 { line-height: normal } 
.Sg77/e2 { line-heigqht: 2 } 
ーー テ 
</style> 
</head> 
<body> 





<div class="sg77p/e7"> 

スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 」 
と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 
来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生 
み 出 され まし た 。 

</diV> 

<div class="sgp/e2"> 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ の レイ アウ ト を 定義 する 技術 」 
と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体 哉 に 関わ る 指定 と を 分 離さ せ 、… 
… (中 略 ) …… 姿勢 の も と に 生み 出さ れ ま し た 。 

</div> 

</bodV> 

</html> 














行 の 高 さ を 設定 し た い 


テ せ 軸 
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表示 お 気 に 入 0⑯ ウー ル D へ 7 『 コ 
③ 玉 ・ の 還 較 の 用 we 吉 pmc ye "roll 


アボ 中 




















全 値 を 2 に 設定 する と 、 行 の 高 さ は フォ ント サイ ズ の 2 倍 (32pt) に な り ま す 

















1 1 IE5.5 1 ヨミ : NN4.7 
サイ ズ O O O O O 
パー セン ツン ト O O O O O O O 
比率 O O O O O O O 
normal O 〇 め ] り O O O O 





※ 通 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
jp, 文字 の 王 直 位置 を 指定 し た い ・ 
=ーp デ 文 字 を グリ ッ ド に お さめ た い ・…… 


68 om を wm し eV Sg 8 こ 









テバ サコ 


text-align: 太 





壇 *eee キ ー ワ ー ド 





行 揃え を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
left 左寄せ 
right 右寄せ 
center セン タリ ング 
justify 均等 割付 
justify は 均等 割付 を 行う 値 で す が 、 実際 は text-align プロ パテ ィ 単 体 で は 動作 し ませ ん 。 均 等 
割付 に つい て は text-jusify プロ パティ (D.76) を 参照 し こく だ さい 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 行 揃え を 指定 し た い </Hitle> 
<style type="text/css"> 
<!-- 
.sg77//e7 { 
text-align: left: 
color: red 





} 

.S77D/e2 { 
text-aliqn: right: 
color: green 


テキ 











} 
.S077P/e3 { 
text-align: center: 
color: blue 

} 
= 
</style> 
</head> 
<body> 
<diV class="sg/p/e7 ">text-align: lef で 左寄せ を 指定 。</div> 
<div class="sg/7p/e2">text-align: right で 右寄せ を 指定 。</div> 
<div class="sg/p/e3">text-align: center で セン タリ ング を 指定 。</div> 
<br> 
<table border="1" width="100%"> 

<tr><th class="sg7p/e7"> 見 出し 左寄せ </th> 

<th class="sg7p/e2"> 見 出し 右寄せ </th></tr> 

<tr class="sg7p/e3"><td> 行 セ ンタ リン グ </td> 

<td> 行 セ ンタ リン グ </td></tr> 

<tr><td class="sgp/e2"> セル 右寄せ </td> 

<td class="sg77p/e7 "> セル 左寄せ </td></tr> 
</table> 
</body> 
</html> 








イル) 編集 D 表示 お気 に 和 D⑱ ウー- ル D へ ル プ (⑪ 
系 ・ の 6 回 回 人 ぬ の 天 sm9 W テ 7 の っ 回 ・ 


text-align lsft で 左寄せ を 指定 。 


text-align right で 右寄せ を 指定 。 


text-align center で セン タリ ング を 指定 


見 出し 左寄せ 


行 セ ンタ リン グ 





見 出し 右寄せ 








【< 7 7i=] に 


text-align lsft で 左寄せ を 指定 。 
text-aligr right で 右寄せ を 指定 。 


text-align center で セン タリ ング を 指定 。 


テキ 

















_ 見 出し 右寄せ 


























行 揃え を 指定 する HTML タグ を CSS に 改め る RSESEGCCCCCCCCCCCULKYCCCCCCLYYLLL 


HTML タグ で 文字 の 行 揃え を 指定 する に は 、 次 の よう に align 属性 を 利用 し ます 。 
<h へ align=" 衣 "テー</h へ > 見 出し の 行 揃え (へ 一 見 出し レベ ル を 表す 1 一 6) 


<D align=" 誠 ">ー</p> 段落 の 行 揃え 

<div align=" 衣 ">ー</div> 特定 範囲 の 行 揃え 

< の align=" 衣 "テー</ の 〇 > セル 内 の 行 揃え (ーーtr、th、td) 
<center> </center> 任意 の 内 容 の 行 揃え 


支 一 left、right、center 


HTML タグ の align 属性 の 多く は Deprecated (推奨 し な い ) と され て お り 、 行 揃え は スタ イル シー ト 
で 指定 する こと が 推奨 され て いま す 。 ま た スタ イル シー ト な ら 上 記 以 外 の 要素 の 行 揃え を 指定 する こと も 
可能 で す (た だ し ブロ ッ ク レ ベル 要素 の み ) 。 同 様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な 


り ま す 。 
h^ {text-atign: 文 } 見 出し の 行 揃え (へ 一 一 見 出し レベ ル を 表す 1 一 6) 
pD {text-align: 文 } 段落 の 行 揃え 
div { text-align: 文 特定 範囲 の 行 揃え 
{text-align: 文 ] セル 内 の 行 揃え (ーーtr、th、td) 
式 {text-align: center ] 任意 の 内 容 の 行 揃え (ー 一 セレ クタ ) 


文 一 left、right、center 


OILAKINLKKKIRKKIKIEELIEIKLELKIALIKRKKKKRKKKKRKEKLAELYRRRRRKRRRRRRSRX 











1】 | 王 】 | 王 左 ] 1 ココ NN4 NN4.7 ド に に ルコ 
left O O O O O O (@, 
center O O O O O O O 
right O O O O O O O 
justify し 3 し 3 XX *1 XX *1 ※ ※ し 3 





* 1 : text-justify と 併用 すれ ば 〇 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 





ふ 、 文字 の 各位 置 指 定 し た い ……ーーーーー… p.75 要素 の 配置 位置 を 指定 じ し たい 6 
文字 の 均等 割付 を 指定 し た い -:P.76 キャ ブシ ョ ン の 位置 を 指定 し た い … 





本 誠に ーー > 衝 


> 
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vertical-align: 文 





文 eeoe キ ー ワ ー ド 
サイ ズ を 表す 数 値 + 単位 
バ パーセント を 表す 数 値 +% 





イン ライ ン レ ベル 要素 と テー ブル の セル 要素 (th 要素 、td 要素 ) に 設定 し 、 そ れ ら の 要素 が 表 
示さ れる 行 の 中 で の 、 垂 直方 向 の 位置 ( 縦 方 向 の 位置 ) を 指定 し ます 。 


値 に は 次 の よう な 指定 方 法 が あり ます 。 

キー ワー ド 
baseiine ベー スラ イン に 揃え る (デフ ォ ル ト ) 
suDer 上 付き 文字 に する 
sub 下 付き 文字 に する 
top 上 に 揃え る 
middle 中 に 揃え る 
bottom 下 に 揃え る 

サイ ズ を 表す 数 値 十 単位 


親 要 素 の ベー スラ イン を 0 と し 、 そ こ か ら の 垂直 位置 を 単位 付き の 数 値 で 設定 し ます 。 正 の 値 
で は 上 に 、 負 の 値 で は 下 に 移動 し ます 。 


パー セン ト を 表す 数 値 +% 
親 要素 の ペー スラ イン を 0 と し 、 そ こ か ら の 生 直 位置 を line-height プロパティ (p.66 参照 ) 
で 設定 され た 高 さ に 対す る 割合 で 指定 し ます 。 正 の 値 で は 上 に 、 負 の 値 で は 下 に 移動 し ます 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 文字 の 垂直 位置 を 指定 し た い </title> 

<style type="text/css"> 


1 





.・S977p/e7 { Vertical-align: baseline } 

.Sg77p/e2 { Vertical-aliqn: sub } 

Sg77/e3 { Vertical-aliqgn: super } 

.Sg77//e5 { vertical-align: top } 

.S977/e6 { vertical-align: middle } 

-S977p/e7 { Vertical-aign: bottom } 

ーー ニテ 

</style> 

</head> 

<body> 

<P> これ は <span class="sg77p/e7"> ベー スラ イン (標準 ) </span> で す 。</D> 
<p> これ は <span class="sg7p/e2"> 下 付き 文字 </span> で す 。</P> 
<P> これ は <span class="sg77p/e3"> 上 付き 文字 </span> で す 。</P> 
<P>top を 指定 <1mqg src="cat2.qif" class="sg/p/e5"></D> 
<P>middle を 指定 <img src="cat2.qif" class="sg/pe6"></p> 
<p>bottom を 指定 <1img src="cat2.gif" class="sg/p(e7"></p> 

< / bodV> 

</html> 











文字 の 垂直 位置 を 指定 し た い 73 


当 文字 の 往 直 位置 を 指 回 回 
アイ ル (編集) 表示 ⑦ お 気 に AOG” 著 


⑨ ま ・@ 国 必 ”zh2@ 
これ は ベー スラ イン (標準) で 
す 。 





これ は ベー スラ イン (標準 ) で す 。 





和 これ は 下 付 き 文字 で す 。 
これ は 下 付き 文字 で す ・ 人 Wew 玉 
ks 


これ は 十 付 文字 て 


top を 指定 ⑨ 
"9 
bottom を 指定 ⑨ 


| 身 ペー ツジ が 表示 | の イタ ネッ ト 
4 Internet Explorer 6.0 は イン ライ ン レ ベル 要 
素 に 対す る bottom は 対応 し て いま せん 


これ は 
top を 指定 


す 。 


middle を 指定 





bottom を 指定 














74 文字 の 加 直 位置 指定 し た い 


[ 生 直 位置 を 指定 する HTML タグ を CSS に 改め る RAIAAXALCKD テ 
HTML タグ で 要素 の 垂直 位置 を 指定 する に は 、 次 の よう な 方 法 が あり ます 。 = 
<sUD> </sup> 上 付き 文字 ト 
<SUb> </sub> 下 付き 文字 
< の valign=" 衣 "テー</ や > セル 内 の 文字 位置 (ツー 一 tr、th、td) 
<img src=" 人 へ " align=" 衣 "> 画像 と 文字 の 関係 (ヘー 画像 の URL) 


廊 一 一 top、middle、bottom、baseline 


同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 
式 {veicaLalign: super } 上 付き 文字 ( 廊 ーー セレ クタ ) 
区 {vericaLalign: sub } 下 付き 文字 (ー セ レク タ ) 





tr {tuverticaLalign: 文 セル 内 の 文字 位置 
th {verticaLalign: 支 セル 内 の 文字 位置 
td {verticaLalign: 廊 } セル 内 の 文字 位置 
img {verticaLaliqn: 太 } 画像 と 文字 の 関係 


文 一 一 top、middle、bottom、baseline 


CCCYYYYYYKLLKKKLKIIKRRKRRRAAALLXKK ス ANN スス スス スト メメ メメ メメ ミスミ ミ ミミ ミミ ミミ ミミ メ ミミ メメ ミミ ミ メ 】 























1 工 】 IE5 | 王 其 -】 IE6 NN4 NN4.7 ド に 
baseline O O O O 人 1 へ O 
sub O O O O ※ ※ O 
super O O O O も 3 4 O 
top O O 9 O O O O 
middle O O O O O O O 
bottom @ O へ *2 "2 O O O 
サイ ズ し と 3 ※ X X と 3 O 
パー セン ト ※ ※ と 3 ※ 26 ※ OO 





* 1 : セル 要素 に 対し て は X 
*※2 : インライン レベ ル 要 素 に 対し て は メ 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


聞か 行 え を 指定 し た い ーーー p69 
コア 本 の 配置 位 置 を 指定 じたい ーー p212 


EKEGh ト kb トト に に に に に に 9 誠 








テハ 由 


text-justifv: 文 





支 eeeee キ ー ワ ー ド 





文字 の 均等 割付 を 指定 し ます 。 

CSS2 の 仕様 で は 、 均等 割付 に は text-align: justify を 指定 する よう 定義 され て いま す が 、 こ 
の 方 法 で は 均等 割付 に する こと は で きま せん 。 均 等 割付 を 適用 する に は text-align: justify に 加え 、 
text-justify プロ パテ ィ を 指定 する 必要 が あり ます 。 こ れ は Internet Explorer5.5 が W3C の 
「Extensible Stylesheet Language (XSL)」 の 仕様 を 一 部 独自 に 採用 し た プロ パテ ィ で す 。 

値 に は 以下 の キー ワー ド が あり ます 。 


auto 
distribute 
distribute-all-ines 


inter-cluster 
inter-ideoqraph 
inter-word 


neWSDaDer 





ブラ ウザ に 依存 (デフ ォ ル ト ) 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 割付 ける 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 割付 ける 

最終 行 で 行末 まで 満た な い テ キス ト も 均等 に 割付 ける 

単語 間隔 の な い テ キス ト を 調整 し て 均等 に 割付 ける 

漢字 な どの 文字 間隔 と 単語 間隔 の 両方 を 調整 し て 均等 に 割付 ける 
単語 間隔 の み を 調整 し て 均等 に 割付 ける 。 最 終 行 で 行末 まで 満た な 
い テ キス ト は 均等 割付 に は な ら な い 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 割付 ける 


Im 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type' content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 文字 の 均等 割付 を 指定 し た い </title> 
<style type="text/css"> 
IE 
p { 
font-family: AriaLHelvetica,sans-serif 
font-size: 10pt: 
iine-heiqght: 140%: 
text-align: justifv 
} 
が Sp/e7 { text-justify: auto } 
が 5gp/e2 { text-justify: distribute } 
が 5g77p/e3 { text-justifv: distribute-all-lines } 
が 5og77p/e4 { text-justifv: inter-cluster } 
が Sp/e5 { text-justify: inter-ideograph } 
が Sg7p/e6 { text-justify: inter-word } 
# が 5g7/eZ { text-justifV: newspaper } 
span { font-weight: bold } 
ーー> 
</stvle> 
</head> 
<body> 
<P 1d="sg/p/e7 "><span>auto </span>Default. Allows the browser to determine which 
justifcation algorthm to apply.<br> 
ブラ ウザ に 依存 し ます 。</P> 


<P 1d="sg7mp/e2"><span>distribute </SDan>Handles spacing much like the newspaper 
value. This form of justification is optimized for documents in Asian languages, Such as 
Thai.<br> 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 割付 け ま す 。 タ イ 語 の よう な アジ ア 系 の 言語 に 





文字 の 均等 割付 を 指定 し た い 
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適し た 指定 方 法 で す 。</p> 


<PD id="sg77p/e3"><span>distribute-alLlines </span>Justifies ines of text in the same 
way as the distribute value, except that it also justifies the last line of the paragraph. This form of 
justification is intended for ideographic text.<br> 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 割付 け ま す 。 最 終 行 で 行末 まで 満た な い テ キス 
ト も 均等 に 割付 ます 。</p> 


<P 1d="sg/7p/e4"><span>inter-cluster </span>Justifies ines of text that contain no inter- 
word spacing. This form of justification is optimized for documents in Asian languages.<br> 
単語 間隔 の な い テ キス ト を 調整 し て 均等 に 割付 け ま す 。 ア ジア 系 の 言語 な ど に 適し た 指定 方 
法 で す 。 

</D> 


<P 1d="sg77p/e5"><span>inter-ideograph </span>Justifies ines of ideographic text, and 
Increases Or decreases both inter-ideograph and inter-word spacing.<Dbr> 
漢字 な どの 文字 間隔 と 単語 間隔 の 両方 を 調整 し て 均等 に 割付 け ま す 。</p> 


<P id="sg の (66"><span>inter-word </span>Aligns text by increasing the space 
between words. This value's spacing behavior is the fastest way to make all lines of text equal 
In length. Its justification behavior does not affect the last line of the paragraph.<br> 

単語 間隔 の み を 調整 し て 均等 に 割付 け ま す 。 最 終 行 で 行末 まで 満た な い テ キス ト は 均等 割付 
に は な り ま せん 。</p> 


<P 1d="sg7p/e7"><span>newspaper </sDan>Increases or decreases the spacing 
between letters and between words. It is the most sophisticated form of justification for Latin 
alphabets.<br> 

文字 間隔 と 単語 間隔 の 両方 を 調整 し て 均等 に 割付 け ま す 。 英 文 な ど に 最適 な 指定 方 法 で す 。 
</P> 


</body> 
</htm> 
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※ 適 用 する 言語 に よっ て も 対応 は 異な り ま す 
※ Macintosh 版 IE5 は 対応 し て いま せん 


文字 の 均等 割付 を 指定 し た い 





当 文字 の 均等 割付 を 指定 し た い に < 
カイル 編集 ) 表示 Q⑦ お 気 CA 半 


戻 5 ・ | 半 ” "Fu 
@ 京 ・6 回 


auto Default. Allows the browser to 
determine which justication algorthm to 
apPly 

ブラ ウザ に 依存 し ます 。 


distribute Handles spacing much like the 
newspaper yalue. This form of justiication is 
optimized for documents in Asian 
languages, Such as Thal. 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 
割付 け ま す 。 タイ 語 の よう な アジ ア 系 の 言語 に 
通し た 指定 方 法 で す 。 


distribute-all-lines Justifies lines oftext in 
the sameway asSthe distribute value, 
except that it also justifes the last line of 
the paragraph. This form of justifcation is 
intended for ideographic text 

単語 間 同 と 文字 間隔 の 両方 を 調整 し て 均等 に 
割付 け ま す 。 最終 行 で 行末 まで 満た な い テ キ 
スト も 均 短 に 割付 ます 。 


inter-cluster Justifies lines of text that 
contain no interword spacing. This form of 
justiWcation is optimized for documents in 


Asian languageS. 
単語 間隔 の な い テ キス ト を 調整 し て 均等 に 割付 
け ま す 。 アジ ア 系 の 言語 な ど に 通し た 指定 方 法 
で す 。 


jnterideograph Justies lines of 
ideographic text。 and increas88 Or 
decreases both interideograph and inter 
WOrd spacind 

漢字 な どの 文字 間隔 と 単語 間隔 の 両方 を 調 束 
し て 均等 に 割付 は ま す 。 


jnterword Aligns text by increasing the 
space between words.This value's spacing 
behawior is the fastest way to make all lines 
of text equal in length、 lts justification 
behavor does not affect the last line of the 
Paragraph, 

単語 間隔 の み を 調整 し て 均等 に 割付 け ます 。 
最終 行 で 行末 まで 酒 た な い テ キス ト は 均等 割 
佑 に は な り ま せん 。 





neWSPaPer InCreaSeS Or decreases the 
spacing betwesn letters and between 
words. is he most sophisticated form of 
justification for Latin alphabets 
文字 間隔 と 単語 間隔 の 両方 を 調整 し て 均等 に 
割付 け ま す 。 英文 な ど に 最適 な 指定 方 で す 。 


人 イン ター ネッ トト 





auto Default. Allows the browserto determine 
which justifcation algorthm to apply. 
プラ ウザ に 依存 し ます 。 


distribute Handles spacing much like the 
newspaper Yalue. This form of justifcation is 
optimized for documents in sian languad8S, 
such as Thal 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 害 
付け ます 。 タイ 語 の よう な アジ ア 系 の 言語 に 通し 
た 指定 方 法 で す 。 


distribute-alllines Justiies lines of text in 
the same way as the distribute value, except 
that it also justiWes the last line of the 
Paragraph。 This form of justifcation is 
intended for idgographic text 

単語 間隔 と 文字 間隔 の 両方 を 調整 し て 均等 に 割 
合 け ます 。 最 締 行 で 行末 まで 満た な い テ キス ト も 
均等 に 割付 ます 。 


inter-cluster Justiies lines of text 1hat 
contain no interword spacing. This form of 
justifcation is optimized for documents in 
Asian languades. 

単語 間隔 の な い テ キス ト を 調整 し て 均等 に 割付 け 
ます 。 アジ ア 系 の 言語 な ど に 通し た 指定 方 法 で 
す 。 


inter-ideograph Justifies lines of ideographic 
text。 and increases 0r decreases both 
interrideograph and interrword spacing. 

湊 字 な どの 文 宇 間 隔 と 単語 間隔 の 両方 を 調整 し 
て 均等 に 割付 け ま す 。 


Interword Aligns text by increasing the 
space between words. This value's spacing 
behavior is the fastest way to make all lines of 
text equal in length. lts justifcatinn behavior 
does not affect the last line afthe paragraph, 
単語 間隔 の み を 調整 し て 均等 に 割付 け は ます 。 最 
終 行 で 行末 まで 満た な い テ キス ト は 的 等 割付 に 
は な り ま せん 。 


neWSPaper InCcreases 0r decreases the 
spacing between letters and between words.N 
js the most saphisticated form of justifcation 
for Latin alphabets. 

文字 間隔 と 単語 間隔 の 両方 を 調整 し て 均等 に 割 
祭 け ます 。 英文 な ど に 最適 な 指定 方 法 で す 。 





4A Netscape は 対応 し て いま せん 





行 揃え を 指定 し た い 
文字 間隔 を 指定 し た い 
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テキ 


letter-spacindg: 文 





ws・ サ イズ を 表す 数 値 単位 
キー ワー ド 





文字 と 文字 の 間隔 ( 字 間 ) を 指定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単位 

数 値 に 単位 を つけ て 文字 間隔 を 指定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 

マイ ナス の 値 を 指定 する と 文字 どう し が 重なっ て 表示 され ます 。 こ の 性質 を 利用 し て 文字 列 を 
重ね 合わ せ た デ ザイ ン を 表現 する こと も で きま す 。 


キー ワー ド 
normal 標準 の 文字 間隔 (デフ ォ ルト ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 文字 間隔 を 指定 し た い </title> 

<stvle type="text/css"> 

<!-- 


P-S/7p/e7 { letter-spacing: normal } 


D.sg77p/e2 。 { 
letter-spacing: 10pt: 
color: red 

} 








</style> 
</head> 
<body> 


テバ せ 由 


<P Class="sg77p/e7 ">letter-spacing: normal (デフ ォ ル ト ) </p> 
<P class="sg77p/e2" >letter-spacing: 10pt</D> 

</bodV> 

</html> 











当 文字 間隔 を 指定 し た い - Microsoft Imternet Explorer 
フイ ル (E) 編集) 表示) お 気 に 入 DO ウール ① ヘル プ ⑪ 


②・⑨ 図 国人 ぬ の ws 放 5m29 価 の 7 。 の の 2 7F2O 


letter-spaoing: normal( デ フォ ルト ) 


la も ti@ rr 写 析 含 @ 1.g 








因 ] パージ が 表示 され まし た 物 イ ンタ ーネット 











letter-spacing: normal( デ フォ ルト ) 


『 光導 誠 『 生 ! 全 央 人 (骨太 














1】 1 1 主 た 】 1 ココ NN4 MC 完 4 に を 
サイ ズ O O 〇 〇 2 ※ [の 
normal 〇 あゆ (@ O ※ ※ 責 ) 





※ 通 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


か 時 間隔 を 指定 し た い 
販 ” 文字 を グリ ッ ド に お さめ た い 
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Word-spacind: 文 





ww サイ ズ を 表す 数 値 単位 
キー ワー ド 





単語 と 単語 の 間隔 (単語 間隔 ) を 設定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単位 
数 値 に 単位 を つけ て 単語 間隔 を 設定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 


キー ワー ド 
normal 標準 の 単語 間隔 (デフ ォ ル ト ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 単語 間隔 を 設定 し た い </title> 
<style type="text/css"> 
<!-- 
div { 
margin: 20px auto: 
font-family: AriaLHelvetica,sans-serif 
} 
・Sg77p/e7 { 
Word-spacing: normak 
font-size: 14pt: 








color: red 


82 単語 間隔 を 指定 し た い 





} 

-Sg77P/e2 { 
word-spacindg: 10pt: 
font-size: 14pt: 
color: blue 

} 

ーー> 

</style> 

</head> 

<bodV> 

<div> 

word-spacing: normal<br> 

<span Class="sg/7p/e7">The 'word-spacing' property specifies spacing behavior between 

words. </SDan> 

に っ / div> 

<diV> 

word-spacing:10pt<br> 

<span class="sg7p/e2">The 'word-spacing' property specifies spacing behavior between 

words. </SDan> 

</div> 
</body> 
</html> 





単語 間隔 を 指定 し た い 
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osoft nternet 


word-spacing: normal 
The word-spacing' property specifies spacing behavior between words. 


word-spacing:10pt 
The 'word-spacing' property specifies spacing behavior between 











The word-spacing' property specifes spacing behavior between words。 


word-spacing:10pt 
The word-spacing'′ property specifies spacing behavior between words. 














1 マ 】 1 1 二 区 】 IE6 NN4 NN4.7 N6.2 
サイ ズ ※ も 3 も 3 O ※ ※ 〇 O 
normal ※ ※ ※ O ※ ※ O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
※Macintosh 版 IE5 は 対応 し て いま す 


議 。 メ 字 間 隔 を 設定 し た い … ム ーー p80 


W 








text-indent: 太 





た ee サイ ズ を 表す 数 値 + 単 位 
パー セン ト を 表す 数 値 +% 


ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 1 行 目 の イン デン ト ( 字 下 げ ) を 設定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単位 
数 値 に 単位 を つけ て イン デン ト の 幅 を 指定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 


パー セン ト を 表す 数 値 十 % 
親 要 素 の ボッ クス 領域 の 幅 に 対す る 割合 で 設定 し ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 一 行 目 に イン デン ト を 設定 し た い </title> 
<style type="text/css"> 
<!-- 
p-sg77p/e7 。 { 
text-indent: 3cm: 
color: red 


} 

psg77p/e2  { 
text-indent: 1em: 
color: blue 











アバ せ 中 





テバ せ 届 





D.S977/e3 { 
text-indent: 50%: 
color: green 

} 

</style> 

</head> 


<bodV> 


<P>text-indent プロ パティ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 目 の イン デン ト ( 字 
下げ ) を 設定 し ます 。 任意 の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 幅 に 対す る 割合 で 指 
定 する 方 法 と が あり ます 。 </P> 


<P class="sg/p/e7 ">text-indent プロ パテ ィ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 
目 の イ ン デ ント ( 字 下 げ ) を 設定 し ます 。 任意 の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 
幅 に 対す る 割合 で 指定 する 方 法 と が あり ます 。</P> 


<P Class="sg/7p/e2">text-indent プロ パティ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 
目 の イ ン デ ント ( 字 下 げ ) を 設定 し ます 。 任意 の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 
幅 に 対す る 割合 で 指定 する 方 法 と が あり ます 。</p> 


<P class="sg/7p/e3">text-indent プロ パテ ィ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 
目 の イ ン デ ント ( 字 下 げ ) を 設定 し ます 。 任意 の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 
幅 に 対す る 割合 で 指定 する 方 法 と が あり ます 。</p> 


</body> 


「 ッ html> 








1 行 目 に イン デン ト を 設定 し た い 


AE 


text-indent プ ロバ パテ ィ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 目 の イン デン ト ( 字 下げ ) を 設定 し ま 
す . 任意 の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 幅 に 対す る 割合 で 指定 する 方 法 と が あり ます 、 


tsxt-indant プ ロバ パテ ィ は ブロッ クレ ベル 要素 の 中 に ある 文 凍 の 一 行 目 の イン デン ト ( 字 下げ ) 
を 設定 し ます 、 任意 の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 幅 に 対す る 割合 で 指定 する 方 法 と が あ 


) イ ン デ ント ( 字 下 げ ) 
台 で 指定 する 方 法 と が あり 


text-indent プ ロ パ ティ は プロ ッ ク レ ベル 要素 の 中 に 
ある 文章 の 一 行 目 の イ ン デ ント ( 宇 下げ ) を 設定 し ます 。 任意 の 数 値 で 指定 する 方 法 と . 親 要素 の ボッ クス 
幅 に 対す る 割合 で 指定 する 方 法 と が あり ます 。 











text-indent プ ロバ ティ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 目 の イン デン ト ( 字 下げ ) の を 委 十 し ます . 合 ト 
の 数 値 で 指定 する 方 法 と 、 親 要素 の ボッ クス 幅 に 対す る 割合 で 指 する 法 ど が あり ます 


ext-indent プ ロ パ ティ は ブロ ッ ク レ ベル 要素 の 中 に ある 文章 の 一 行 目 の イン デン の を 雪 定 
し ます 。 任意 の 数 値 て 指定 する 万 坊 と . 箱 要 素 の ボッ クス 幅 に 対す る 割合 で 指定 す る 方 法 と が ます 。 


(は ブロ ッ ク レ ベル 要 の イン デン ト ( 字 下げ ) を 設定 し ます . 任 
と 、 親 要素 の ポッ クス 幅 に 定 ? ヵ 


ext-indert プ ロ パ ティ は ブロ ッ ク レ ベル 要素 の 中 に ある 
文章 の 一 行 目 の イン デン ト ( 字 下げ ) を 設定 し ます 。 任意 の 欠 仁 で 指定 する 方 法 と 親 要素 の ボッ クス 幅 に 対す る 
割合 で 指定 する 方 法 と が あり ます 。 








1 ズ 】 1 1 二 其 -] 1 コジ NN4 NN4.7 が [ に 乾 
サイ ズ O O O 〇 O O O O 
パーセント O O O O O O O 





※ 週 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


マー ジン を 個別 に 指定 し た い … 
に コ パ バディ ング を 個別 に 指定 し た い ・…… 








テバ 


white-space: 文 





文 *ees キ ー ワ ー ド 





要素 内 の 半角 スペ ー ス や タブ 、 改 行 を その まま 表示 させ ます 。 内容 も 入力 し た と お り に 表示 さ 
れ ま す 。 
値 に は 以下 の キー ワー ド が あり ます 。 


Pre 入力 され た 半角 スペ ー ス や タブ 、 改行 を その まま 表示 。 内 容 も 入力 され 
た と お り に 表示 する 。 折り 返し も 行わ な い 
normal 連続 する 複数 の 半角 スペ ー ス や タブ 、 改行 文字 を 1 つの 半角 スペ ー ス と 


し て 処理 。 内 容 は ボッ クス 領域 の 端 で 改行 する (デフ ォ ル ト ) 


Windows 版 Internet Explorer で は 、 バ ー ジ ョ ン 6 の 標準 準拠 モー ド (p.51 参照 ) の 場合 に 
の み 動 作 し ます 。 互換 モー ド や それ 以前 の バー ジョ ン の Internet Explorer で は 動作 し ませ ん 。 

な お 、white-Space プロ パテ ィ に は 、 改行 し な いで 表示 させ る nowrap と いう 値 も あり ます 。 
nowraD に つい て は 次 項 を 参照 し こく だ さい 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 空白 や 改行 を その まま 表示 し た い </title> 
<Style type="text/css"> 
<!-- 
code { 
white-space: Dre: 














line-heiqht: 150% 


div {marqin: auto 25px } 

ーー テ 

</style> 

</head> 

<bodV> 

<P> フェ ー ド イン させ る スク リプ ト </P> 

<diV> 

<code> 

function fadein) 【 
r_color = "000123456789abcd': 
9g_color = "0123456789abcdef': 
b_color = "000123456879abcd': 


for=0: ic16, は +){ //=1 か ら に 15 まで 繰り 返す 
r=r_color.charAt(⑪ // 配 列 r_color の 」 文 字 目 を 取得 

9 = 9_color.charAt(): / 配 列 g_color の i 文 字 目 を 取得 

b = b_color.charAt0: / 配 列 b_color の 文字 目 を 取得 
document.bgcolor = " 電 +r+r+9+9+D+D: // 結 合 し て 背景 色 に 設定 


</code> 
</divV> 

</body> 
</htm> 








や cX 生 を その まま 表示 し た い 


テキ 
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テロ Pt その 3 は し よい - Were 
アイ ル () 引 集 5 表示 お 気に入り ⑳④ ツール D へ ルプ ⑪ 
@・ の 選 回 人 @ 

フェ ー ド イン させ る スク リブ ト 


function fadein()[ 
r_coler = “000123456789abcd": 
g_color = "0123456789abcdef~: 


b_color = "OO0123456879abcd : 

for(i=0: i<16。 irt)[ //i=1 か ら i=15 ま で 緑 り 返 す 
r =r_color.charAt(i): // 配 列 r_color の i 文 字 目 を 取得 
g = g_color.charAt(i): // 配 列 g_color の 文字 目 を 取得 
b = b_color.charAt(i): // 配 列 b_color の 文字 目 を 取得 
document .bgcolor = “trtrtgtgtbtb:  // 結 合 し て 背景 色 に 設定 





フェ ー ド イン させ る スク リブ ト 


function fadein()[ 

r_color = "000123456789abcd「: 

g_color = "0123456789abcdef “: 

b_color = "000123456879abcd「: 

for(i0: ic16, it)【 //i=1 か ら に 15 ま で 繰り 返す 
r = r_color.arAt(D): // 配 列 r_color の i 文 字 目 を 取得 
sg_color.dharAt(i): // 配 2g_color の i 文 字 目 を 取得 
b = b_color.charAt(i): // 配 列 b_color の i 文 字 目 を 取得 
dboument .bgcolor = "trtrtgtgtbtb: // 結 合 し て 背景 色 に 設定 





空白 や 改行 を その まま 表示 する HTML タグ を CSS に 改め る RCCCGCCCCPPCPPRRPPPPP 


HTML タグ で 空白 や 改行 を その まま 表示 する 指定 を する に は 、 次 の 方 法 が あり ます 。 
<Dre> </Dre> 入力 し た まま 表示 


同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 
文 { white-space: pre } 入力 し た まま 表示 ( 娘 一 一 セレ クタ ) 


OKITAALLMNNERNNKKNYYYIYYYYYYYYYYYIYRIYRYYRRYRRYEEEEKKKYYYYXYYREEKK 





1 |] 1 王 た 】 IE6 NN4 ドド C 完 4 ド に ルコ 
normal ※ に O O O O O 
Dre XX ※ ※ (の O O O 





* 標 準 準拠 モー ド の 場合 に 動作 し ます 。 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
※ Macintosh 版 IE5 は pre に 対応 し て いま す 


か 、 殺 則 処理 を 適用 し た い ーー ドー トー ドー p94 
ジア 単語 内 で の 改行 処理 を 指定 し た い ーー… p97 





white-space: 太 





支 ccce キ ー ワ ー ド 


要素 内 の 半角 スペ ー ス や タブ 、 改行 を まとめ 、 内 容 を 改行 し な いで 表示 させ ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
noWrap 連続 する 複数 の 半角 スペ ー ス や タブ 、 改行 文字 を 1 つの 半角 スペ ー ス と し て 
処理 。 内容 の 折り 返し を 行わ な い 
normal 連続 する 複数 の 半角 スペ ー ス や タブ 、 改 行文 字 を 1 つの 半角 スペ ー ス と し て 
処理 。 内 容 は ボッ クス 領域 の 端 で 改行 する (デフ ォ ル ト ) 
な お 、white-Space プロ パティ に は 、 空 白 や 改行 を その まま 表示 させ る pre と いう 値 も あり ま 
す 。pre に つい て は 前 項 を 参照 し こく だ さい 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 改行 し な いで 表示 させ た い </title> 
<style type="text/css"> 
<!-- 
div { 
font-weight: bold: 
font-family: AriaLHelvetica,sans-serif 
} 
psg/pfe7 {white-space: normal } 
PD#sgpfe2 {white-space: nowrap } 


== テ > 





改行 し な いで 表示 させ た い 
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</stvle> 

</head> 

<bodV> 

<div>white-space: normal (デフ ォ ル ト ) </div> 

<P 1d="sg/7p/e イ "> 

white-space は 、 要 素 内 の 半角 スペ ー ス や タブ 、 改 行 を どの よう に 処理 する か を 指定 する プ 
ロ パ ティ で す 。 値 に nowrap を 指定 する と 、 連 続 する 複数 の 半角 スペ ー ス や タブ 、 改行 文字 
を 1 つの 半角 スペ ー ス と し て 処理 し 、 内 容 の 折り 返し を 行わ な く な り ま す 。 

</P> 

<div>white-space: nowrap</div> 

<P id="sgp(e2"> 

white-space は 、 要 素 内 の 半角 スペ ー ス や タブ 、 改 行 を どの よう に 処理 する か を 指定 する プ 
パテ ィ で す 。 値 に nowrap を 指定 する と 、 連 続 する 複数 の 半角 スペ ー ス や タブ 、 改行 文字 
を 1 つの 半角 スペ ー ス と し て 処理 し 、 内 容 の 折り 返し を 行わ な く な り ま す 。 

</P> 

</body> 

</htm に 























ーー テー テーーー 。 
OR- の 回 人 人 の ws 率 jmcooo 人 W7o の 3- 3 回 ・』 2 ァ ro 


white-space: normal( デ フォ ルト ) 

white-space は 、 要素 内 の 半角 スペ ー ス や タブ . 改行 を と の よう に 処理 する か を 指定 する プロ パテ ィ 
で す . 値 に nowrap を 指定 する と 、 連続 する 複数 の 半角 スペ ー ス や タブ . 改行 文字 を 1 つの 半角 スペ ー 
ス と し て 処理 し 内 容 の 折り 返し を 行わ な く な り ま す 。 
| white-space: nowrap 
white-space は 、 要素 内 の 半角 スペ ー ス や タブ . 改行 を どの よう に 処理 する か を 指定 する プロ バテ ィ で 
















角 ス ペー ス や タブ . 改行 文字 を 1 つの 半角 スペ ー ス と し て 処理 し . 内 容 の 折り 返し を 行わ な く な り ます . 

















改行 し な いで 表示 させ た い 










white-space: normal( デ フォ ルト ) 

JJte-spacs は 、 要 表 内 の 半角 スペ ー ス や タブ 、 改行 を どの よう に 処理 する か を 指定 する プロ パテ ィ で す . 値 
スス や タナ 大池 を 1 つの スペ ー ス と し て 人 坦 し 
人 の 折り 授 し を 付 わな く な り ます 。 
white-space: nowrap 
Je-sracs は 、 要素 内 の 半角 スペ ー ス や タブ - 改行 を どの よう に 処理 する か を 指定 する プロ パテ ィ で す 。 値 ( 






数 の 半角 スペ ー ス や タブ . 改行 文字 を 1 つの 半角 スペ ー ス と し て 処理 し 、 内 容 の 折り 返し を 行わ な く な り ます 。 








空白 や 改行 の 扱い を 指定 する HTML タグ を CSS に 改め る ECCCCCCCCCOYKCCKKCLSD 


HTML タグ で 空白 や 改行 の 不可 を 指定 する に は 、 次 の 方 法 が あり ます 。 
<nobr> </nobr> 改行 不可 
< の nowrap> て </ や > セル 内 の 改行 不可 ( 〇 ーーth、td) 


<th>、<td> タグ の nowrap 属性 は Deprecated (推奨 し な い ) と され て お り 、 セ ル 内 の 改行 不可 の 指 
定 は スタ イル シー ト で 指定 する こと が 推奨 され て いま す 。 ま た 、<nobr> タグ は HTML4.01 規格 外 で す 。 
同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 





文 { white-space: nowrap } 改行 不可 (太一 一 セレ クタ ) 
 { white-space: nowrap } セル 内 の 改行 不可 (ーーth、td) 
1 イ 】 IE5 IE5.5 | ヨコ NN4 NN4.7 N6.2 
normal メ し 3 O O O O 〇 O 
nowrap メ 3 O O ※ も 3 〇 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
※ Macintosh 版 IE5 は 対応 し て いま す 


空白 や 改行 を その まま 表示 し た い "ーー pB8 





テ 由 
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テバ せ 由 


Hiine-break: 文 





文 *eece キ ー ワ ー ド 





日 本 語 の 禁則 処理 を 適用 する か どう か を 指定 し ます 。 
通常 、 禁 則 処 理 の 方 法 は ブラ ウザ に 依存 し ます 。Internet Explorer の 場合 、 禁 則 処 理 が 厳密 
で は な く 、 行頭 に 括弧 の 受け や 句読点 、 促 音 、 抑 音 の 半音 文字 、 音 引 記号 な ど が くる こと が あり 
ます が 、line-break プロ パテ ィ を 指定 する と 厳密 な 禁則 処理 を 行え る よう に な り ま す 。 
値 に は 以下 の キー ワー ド が あり ます 。 
normal ブラ ウザ 依存 の 禁則 処理 (デフ ォ ル ト ) 
strit 厳密 に 禁則 処理 を する 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 禁則 処理 を 適用 し た い </title> 
<Style type="text/css"> 
<!-- 
div { 
font-weight: bold: 
font-family: AriaLHelvetica,sans-senif 
} 
P が sg7p/e7 。 { 
line-break: normak 
iine-height: 140% 








94 禁則 処理 を 適用 し た い 





に ーー 二 


DP が sgpfe2 人 { 

Hine-breaks strict 

line-height: 140% 
} 
ー テ > 
</style> 
</head> 
<bodV> 
<div>line-break: normal (デフ ォ ル ト ) </div> 
<P id="sg77p(e7 "> 
スタ イル シー ト の 基本 的 な 書式 は 「 セ レク タ { プロ バ パティ: 値 )}」 の よう に な り ま す 。 セ レク 
タ は スタ イル を 適用 する 対象 、 プ ロバ パテ ィ は 設定 する スタ イル の 性 質 ( 色 、 大 き さ な ど ) 、 
値 は プロ パテ ィ ご と に 決め られ て いる 値 で す 。 言葉 だ け を みる と ちょ っ と 難し そう で す が 、 
スタ イル シー ト は 「" セ レク タ " の "プロ パテ ィ " を " 廊 "に する 」 と いう 形 で 設定 し 、HTML 文書 
に 組み 込ん で いく も の だ と 覚え れ ば よい の で す 。 
</D> 
<div>line-break: strict</diV> 
<D id="sg/ カ pe2"> 
スタ イル シー ト の 基本 的 な 書式 は 「 セ レク タ { プロ バ パティ: 値 ]] の よう に な り ま す 。 セ レク 
タ は スタ イル を 適用 する 対象 、 ブ プロ パテ ィ は 設定 する スタ イル の 性 質 ( 色 、 大 き さ な ど )、 
値 は プロ パテ ィ ご と に 決め られ て いる 値 で す 。 言 葉 だ け を みる と ちょ っ と 難し そう で す が 、 
スタ イル シー ト は 「" セ レク タ " の "プロ パテ ィ " を " 娘 " に する 」 と いう 形 で 設定 し 、HTML 文書 
に 組み 込ん v で いく も の だ と 覚え れ ば よい の で す 。 
</P> 
</bodV> 
</html> 





禁則 処理 を 適用 し た い 
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line-break: normal( デ フォ ルト ) 


スタ イル シー ト の 基本 的 な 書式 は 『 セ レク タ | プロ パテ ィ . 値 の よう に な り ま す 。 セレ クタ は スタ イル を 適 
用 する 対象 、 プロパ ティ は 設定 する スタ イル の 性 質 ( 色 、 大 き さ な ど ) 、 値 は ブロ パテ ィ ご と に 決め られ て 
いる 値 で す 。 言葉 だ け を みる と ちょ っ と 難し そう で す が 、 スタ イル シー ト は 「" セ レク タダ "の "プロ パテ 

イィ " に する 」 と いう 形 で 設定 し 、 HTML 文 書 に 組み 込ん で いく も の だ と 覚え れ ば よい の で す 。 


line-break: strict 


スタ イル シー ト の 基本 的 な 書式 は 『 セ レク タ | プロ パテ ィ - 値 』 の よう に な り ま す 。 セレ クタ は スタ イル を 適 
用 する 対象 プロ パテ ィ は 設定 する スタ イル の 性 質 ( 色 、 大 き さ な ど ) 、 値 は プロ パテ ィ ご と (に 決め られ て 
ん "へ 値 で す 。 言葉 だ け を みる と ちょ っ と 難し そう で す が 、 スタ イル シー ト は 「“ セ レク タ " の “プロパ 
テイ 玉 " 衣 " に する 」 と いう 形 で 設定 し 、 HTML 文 書 に 組み 込ん で いく も の だ と 覚え れ ば よい の で す 。 
= ブ 






























人 Interner Explorer で は ブラ ウザ の 禁則 処理 が あい まい な の で 、「 つ 」 や 「 よ 」 の 小さ な 文字 や 長音 符 が 行頭 に くる 
こと が あり ます が 、strict を 適用 する と 禁則 処理 が 厳密 に な り ま す 





トー デー 





line-break: normal( デ フォ ルト ) 


5Sー は 0 ンス タ プロ (テア 人 の よう (なり す 。 放し クタ は スタ イル を 
敵 ロ パ ティ (は 設定 する スタ イル の 人 所 人 、 大 き さ な ど ) 、 や ティー と に 決め ら 
いろ 借 で す . 生け みる と ちょ っ と 難し し そう て す が 、 スタ イル シー ー ド は P レク ダ ' の "プロ パ 
2 イ | を 大 "に する 」 と いう 形 で 設定 し 、 HTM 文書 に 組み 込ん で し くも の だ と 沈 え れ ば よい の で す 。 


line-break strict 


スタ イル シー ト の 基本 的 な 書式 は 『 セ レク タ [ プロ パテ ィ 値 ] の ょ 280 まれ 2 クタ は スタ イル を 
敵 を する スタ イル の の 人 き さ な ど ) 、 lr 陳 の と に 決め め ら 
いる 位 く す . 言葉 だ け を みる と ちょ っ と 難し そう で す が 、 スタ イル シー ト は 「" ダ の "プロ 

テイ を " 衣 に する 」 と いう 形 で 設定 し 、 NM に 畑 め 込ん て U くも の た と ど 覚 えれ ば よい の で す 。 


































Netscape 3 の 0 に 間 B5HO の line-break プロ バテ ィ に よる 変化 は あり ませ ん 








1】 1 三 ]】 IE5.5 ヨ : NN4 NN4.7 に ルオ 
normal ※ O O 〇 の 】 ※ X 3 
strict も 3 O 〇 O ※ し 3 ※ 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
※ Macintosh 版 IE5 は ブラ ウザ が 自動 的 に 厳密 な 禁則 処理 を 行い ます 


js、 単語 内 で の 改行 処理 を 指定 し た い ……………………・ p.97 
参照 





word-break: 太 





文 *eeeece キ ー ワ ー ド 


単語 内 に お ける 改行 の 方 法 を 指定 し ます 。 
主 に いく つか の 言語 が 混在 する ペー ジ で 、 そ れ ぞ れ の 単語 内 で どの よう に 改行 を 入れ る か を 指 
定 す る 場合 に 利用 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
normal 日 本 語 や 中 国語 、 韓 国語 な ど は 単語 内 や 句 内 の 任意 の 文字 が 行末 に 来 た 場合 
その 場所 で 改行 する 。 英語 な どの 場合 は 単語 の 前 後 で 改行 する (デフ ォ ル ト ) 
break-all 言語 を 問わ ず 単 語 内 や 句 内 の 任意 の 文字 が 行末 に 来 た 場合 、 そ の 場所 で 改行 
する 
keep-all 言語 を 問わ ず 単 語 や 句 の 前 後 で 改行 する 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona/EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 単語 内 で の 改行 処理 を 指定 し た い </title> 

<stvle type="text/css"> 

<!-- 


body { font-family: AriaLHelvetica,sans-serif } 








div { 
font-size: medium: 
width: 600px 

} 

p { 





単語 内 で の 改行 処理 を 指定 し た い 
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width: 600px: 
border: thin dotted #cOcOc0: 
Hine-height: 140% 


テキ 中 


} 

# が gp/e7 人 { word-break: normal 1 
#sgp/e2 { word-break: break-all } 
#5gp/e3 { word-break: keep-all } 
== テ 

</style> 

</head> 

<bodV> 


<div>word-break: normal (デフ ォ ル ト ) </div> 
<P 1d="sg77p(e7 "> 





The 'word-break' property sets or retrieves lne-breaking behavior within 
語 の 前 後 で 改行 し ます 。 
</ PD> 


<div>word-break: break-all</div> 

<D 1d="sg/p/e2"> 

The 'break-all' behaves the same as normal for Asian text, yet allows the 
の 英文 で 、 単 語 の 途中 で 改行 し て いる 点 に 注意 し て くだ さい 。 

</D> 


<div>word-break: keep-all</diV> 

<PD 1d="sg77D/e3"> 

The "keep-all' does not allow word breaking for Chinese, Japanese, and 
の 例文 で は 単語 や 句 の 前 後 で 改行 し て いる 点 に 注意 し て くだ さい 。 
</D> 





</bodV> 


</html> 
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当 語 C の を 導 定 た - Micresott jnteraet Explore 


カイル) 軒 集 ⑰) 表示 お 気に入り (@ 


word-break: normal( デ フォ ルト ) 


The word-breaK' property sets or retmeves hine-breakqng behavor vehin words 
pariculary hiere muliple languages appear in the object The normal value is defaulk 
Iallows lne breakdnd witn Words 

Wordbreak( さ 主 に いく つか の 言語 が 混在 する ペー ジ に お いて 、 それ ぞ れ の 単語 内 で どの 
よう に 改行 を 入れ る か を 指定 する 場合 に 利用 する プ ビ バテ ィ で す 。 normal( デ フォ ルト ) で 
は 日 本 語 や 中 国語 . 線 国 語 な ど は 単語 内 や 句 内 の 任意 の 文字 が 行末 に 来 た 場合 その 場 
所 で 改行 し 英語 ね どの 場合 は 単語 の 前 後 で 改行 し ます 。 


word-break: break-all 


The breakcal' behaves he same as normal for Asien tax yet alows the Ine to breaKa 
itranlyfor non-Asian teyt This value is Suited to Asian at that contains Sorme excerpt 
5 0fnon-Aslan te 

breakal を 指定 する と 、 言語 を 問わ ず 単 語 内 や 句 内 の 任意 の 文字 が 行末 に 末 た 場合 . そ 
の 場所 で 改行 し ます 。 上 の 英文 で . 単語 の 送 中 で 改行 し て いる 点 に 注意 し て くだ さい 。 


wordHbreak: keep-all 


The 'keep-al' does not alow word breaking for Chinese. Japanese, and Korean 
Functions the same way as normal for all non-Asian languageS This value is opbrmized 
for textthat includes small amounts of Chinese, JapaneSe. 0r Korean 
keep-al を 指定 する と 

言語 を 問わ ず 単 語 や 句 の 前 後 で 改行 し ます . normal や al を 指定 し た 場合 は 

日 本 語 の 文章 は 単語 の 遂 中 で あっ て も 行末 で 改行 し まし た が 、 

この 例文 で は 単語 や 名 の 前 後 で 改行 し て いる 点 に 注意 し て くだ さい 


word-break: normal( デ フォ ルト ) 


The word-break' property Se(5 or retmeves line-breakung behavor wthin words. 
perticulary where mullple languages appear in (he object The normal value Is default 
Iralows line breaking wthin words 

word-break は 主 に いく つか の 言語 が 混在 する ペー ジ に お いて 、 それ ぞ れ の 単語 内 で どの 
よう に 改行 を 入れ る か を 指定 する 場合 に 利用 する プロ パテ ィ で す 。 normal( デ フォ ルト ) で は 
日 本 語 や 中 国語 、 韓国 語 な ど は 単語 内 や 名 内 の 任意 の 文字 が 行末 に 来 た 場合 その 場所 
で 行 し 、 英語 な どの 場合 は 単語 の 前 後 で 改行 し ます 。 


word-break: break-all 


The break-al behaves the same as normal for Asian tex. yet alows (he Ine to break 
arbitrarly for non-Asian text Thils Value is sulted to Asian te hat contains Some 
excerpts of nonrAsian text 

breakcal を 指定 する と . 言語 を 問わ ず 単 語 内 や 句 内 の 任意 の 文字 が 行末 に 床 た 場合 そ 
の 場所 で 改行 し ます 。 上 の 英文 で . 単語 の 達 中 で 2 行 し て いる 点 に 注意 し て くだ 


Word-break: keep-all 





The keep-al' does not allow word breakang for Chinese. Japanese. and Korean. 
Funchons the same way aS normal for al non-Asian languageS. This value is Opmzed 
for text that includes smgll amounts of Chinese. Japanese. Or Korean 
keep-a を 指定 する と 、 言語 を 問わ ず 単 語 や 句 の 前 後 で 改行 し ます 。 nomaheal 攻 指定 し 
た 場合 は 、 日 本 語 の 文章 は 単語 の 中 で あっ て も 行末 で 改行 し まし た が 、 この 例 又 で は 単 
語 や 名 の 前 後 で 改行 し て いる 点 に 注意 し て < くだ さい 。 














normal 3 O O O 
break-all し 3 O O O 
keep-all ※ O O O 





※ 週 用 する セレ クタ に よっ て も 効果 が 変わ わり ます 
※ Macintosh 版 IE5 は 対応 し て いま せん 


禁則 処理 を 適用 し た い ……… ド ーー ドー pg4 








テキ 





テハ せ 下 








writing-mode: 文 





支 *eeee キ ー ワ ー ド 





ペー ジ を 縦 書 き で 表示 する よう 指定 し ます 。 


Internet Explorer5.5 が W3C の 「Extensible Stylesheet Language (XSL) 」 の 仕様 を 
ー 部 独自 に 採用 し た プロ パテ ィ で す 。 


値 に は 以下 の キー ワー ド が あり ます 。 
lr-tb 横書き ( 左 か ら 右 、 上 か ら 下 へ ) 
tb-rL 縦 書 き (上 か ら 下 、 右 か ら 左 へ ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 縦 書き で 表示 し た い </title> 

<Style type="text/css"> 

<!-- 

body { line-height: 140% } 

P#Ssg77p/e7 {writing-mode: Ir-tb } 

p が sg7p/e2 {writing-mode: tb-rl } 

= 9 

</style> 

</head> 

<bodV> 


` 


<PD 1d="sg77p/e7"> 
スタ イル シー ト は 、 ひと こと で …… (中 略 ) …… も と に 生み 出さ れ ま し た 。 
</P> 








<hr> 


<D 1d="sg7p/e2"> 

メタ イル シー ト ほ 、 ひと こと で ゃ … (中 略 ) …… も と に 生み 出さ れ ま し た 。 
</P> 

</bodV> 

</html> 
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スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 」 と いう こと が で きま す 。 文書 
の 論理 惜 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本来 HTML の 機能 て は な い 体裁 の 制御 に つい て は 
別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ ま し た . 





スタ イル シー ト は 、 ひと こと で 表現 する な ら ば 「Web ペ バー ジ の レイ アウ ト を 定義 する 技術 」 と いう こと が で きま す . 文書 
の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 
別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ ま し た . 





4A Netscape は 対応 し て いま せん 











1】 |) | 主 誠 】 IE6 NN4 NN4.7 N6.2 
lrtb ※ も 3 O O メ メ メ 
tb-rl メ メ O O ※ も 3 も 3 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
参照 縦 書 き の 下 線 ( 傍 線 ) 位置 を 指定 し た い ………-…・ p.108 
縦 書き で 表示 し た い 


テキ 由 


テハ 中 


text-underline-position: 文 





支 eeece キ ー ワ ー ド 





ペー ジ を 縦 書 き で 表示 する よう 設定 し た 場合 の 下線 ( 傍 線 ) の 位置 を 指定 し ます 。 

下線 の 表示 位置 (テキ スト の 上 か 下 か ) を 指定 する プロ パテ ィ と し て Internet Explorer 5.5 
が 独自 に 拡張 し た プロ パテ ィ で 、text-decoration: underline と 併用 する こと で 、 縦 書き の ペー 
ジ の 傍 線 の 位置 を 指定 で きる よう に な り ま す 。 

通常 縦 書 き の テ キス ト に text-decoration: underline で 下線 を 指定 する と 下線 は 左 に つき ます 
が 、 縦 書き の 場合 の 傍 線 は テキ スト の 右側 に ある ほう が 自然 で す 。 こ の よう な 場合 に text- 
underline-position: above を 同時 に 指定 する と 、 傍 線 が 文章 の 右側 に 表示 され ます 。 

な お 、IE 5.5 に お ける デフ ォ ル ト は below で す が 、 IE 6 で は auto が デフ ォ ル ト に 変更 され て 
いま す 。 

値 に は 以下 の キー ワー ド が あり ます 。 

below テキ スト の 下 。 縦 書き の 場合 に テキ スト の 左側 に 下線 を 表示 (IE 5.5 の デフ 


オォ ルト ) 
above テキ スト の 上 。 縦 書き の 場合 に 文章 の 右側 に 下線 を 表示 
auto 言語 コー ド が 日 本 語 で 縦 書き の 場合 は テキ スト の 上 (= 右側 ) に 下線 を 表示 


(IE 6 以降 の デフ ォ ル ト )。 そ れ 以 外 は below と し て 処理 
auto-pos auto と 同じ 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="]a"> 


<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 縦 書き の 下線 ( 傍 線 ) 位置 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
p { 
writing-mode: tb-r 
Hine-height: 140% 
} 
span が Sg/7p/e7 { 
text-decoration: underline: 
text-underline-position: auto: 
color: #ff0000 
} 
span が sg77p/e2 人 { 
text-decoration: underline: 
text-underline-position: below: 
color: #0000ff 
} 
ーー テ 
</style> 
</head> 
<bodV> 
<D> 
スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば <span id="sg7pfe7">「Web ペー ジ の レ 
イア ウト を 定義 する 技術 ] </span> と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 
と 体 哉 に 関わ る 指定 と を 分 離さ せ 、 本 来 HTML の 機能 で は な い <span id="sgp/e2"> 体 
裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう </span> と いう 姿勢 の も と に 生み 出さ れ ま し た 。 
</p> 
</ bodV> 
</htm> 








縦 書き の 下線 ( 傍 線 ) 位置 を 指定 し た い 
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スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペ ー ジ の レイ アウ ト を 定義 する 技術 」 と いう こと が 肖 
で きま す 。. 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 来 HTML の 機能 で 上 
は な い 体 六 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 次 勢 の も と に 生み 出さ れ ま し た 。 





4 Netscape は 対応 し て いま せん 














1】 1 三 ] 1 王 -] E6 NN4 ドド し 完 4 ド に ルオ 
below ※ X O O X ※ X 
above ※ ※ 加 〇 ※ ※ ※ 
auto 3 4 居 O メ ※ に 3 
auto-pos ※ 回 X Pe9 区 





ED の 3 世 0 





ruby-align: 文 
ruby-position: 文 





支 *eeeee キ ー ワ ー ド 


ruby-align プロ バテ ィ は ルビ の 開始 位置 や 文字 間隔 を 、ruby-position プロ パテ ィ は ルビ が 表 
示さ れる 位置 を 指定 し ます 。 ruby 要素 に の み 適用 し ます 。 


ruby-align 
ruby-align の 値 に は 以下 O ひ キーワ ー ド が あり ます 。 

auto ルビ を 自動 的 に 割り ふる (デフ ォ ル ト )。 日 本 語 、 中 国語 、 韓 国語 な ど 
の 場合 は distribute-Space、 ア ルフ ァ ベ ッ ト の 場合 は center が 適用 
され る 

left ルビ を ふる テキ スト に 対し て 左 詰め で 表示 する 

center ルビ を ふる テキ スト に 対し て セン タリ ング し て 表示 する 

rgt ルビ を ふる テキ スト に 対し て 右 詰め で 表示 する 

distribute-letter ルビ を 均等 に 割り ふる 。 ル ビ の ほう が 長い 場合 に は セン タリ ング し て 
表示 する 

distribute-space 前 後に スペ ー ス を あけ て ルビ を 均等 に 割り か ゆる 。 ル ビ の ほう が 長い 場 
合 に は セン タリ ング し て 表示 する 

line-edge ルビ を ふる テキ スト が 行 端 に ある 場合 は その 端 に 寄せ て 表示 する 。 そ 
れ 以 外 は セン タリ ング し て 表示 する 


ruby-position 
ruby-Dosition の 値 に は 以下 の キー ワー ド が あり ます 。 
above ルビ を 必 る テキ スト の 上 に 表示 する (デフ ォ ル ト ) 
inline ルビ を ふる テキ スト の 直後 に 表示 する 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> ルビ の 配置 を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

1 { color: #ffOOff } 

ruby.sq77p/e7 { rubV-aign: auto } 

ruby.sg77p/e2 { ruby-align: left } 

ruby.sg77p/e3 { rubV-align: center } 

ruby.sg7p/e4 { ruby-align: right } 

ruby.sg/7p/e5 { ruby-align: distribute-letter } 

ruby.sg77p/e6 { rubV-align: distribute-space } 

ruby.sg77p/e7 { ruby-align: ine-edge } 

ruby.sg7p/e8 { ruby-position: above } 

ruby.sg7p/e9 { ruby-position: inline } 

ーー テ 

</style> 

</head> 

<bodV> 

<P><ruby class="sg7p/e7 "> ルビ の 配置 を 指定 <rt>auto</rubV></D> 
<P><ruby class="sg7p/e2"> ル ビ の 配置 を 指定 <rt>left</rubV></D> 
<P><ruby class="sg77p/e3"> ル ビ の 配置 を 指定 <rt>center</rubV></D> 
<P><ruby class="sgp/e4"> ル ビ の 配置 を 指定 <rt>right</rubV></P> 
<P><ruby class="sg7p/e5">distribute-letter を 指定 し た ル ピ <rt>letters/rubV></P> 
<P><ruby class="sg77p/e6">distribute-space を 指定 し た ルビ <rt>space</ruby></p> 
<p> ルビ の 配置 を <ruby class="sg/p/e/"> 指定 <rt>line-edge</rubV></p> 
<P><ruby class="sgp/e8"> ル ビ の 配置 を 指定 <rt>above</rubV></D> 
<P><ruby class="sg7p/e9"> ル ビ の 配置 を 指定 <rt>inine</rubV></p> 
</bodV> 

</html> 














ルビ の 配置 を 指定 し た い 


等 ルビ の 配置 を 指定 し た い - Microsof 操 


アイ ル ① 居 表示 お CAOO” 杜 
② 京 ・ の - 図 ) 必 zu2| 


ルビ の 配置 を 指定 


laft 


ルビ の 配置 を 指定 


Carker 


ルビ の 配置 を 指定 


rg は 


ルビ の 配置 を 指定 

distrbute-letter を 指定 し た ルビ 

寺 HIBOaPBDB8G8 大 指定 し た ルビ 
line_ed 喝 


ルビ の 配置 を 指定 


ルビ の 配置 を 指定 
ルビ の 配置 を 指定 ii 





民 ルビ の 配置 を 指定 し た い - Netscape.. 記 


ルビ の 配置 を 指定 auto 

ルビ の 配置 を 指定 sf 

ルビ の 配置 を 指定 =entsr 

ルビ の 配置 を 指定 ighi 
distribute-letter を 指定 し た ルビ 


letter 


distrbute-space を 指定 し た ルビ 


5DGCe 


ルビ の 配置 を 指定 Ins-sdgs 
ルビ の 配置 を 指定 ap: 
ルビ の 配置 を 指定 inlins 





人 ^ Netscape は 対応 し て いま せん 





























1 ゴマ 】 1 1 王 た ]】 1 ココ NN4 NN4.7 が に サオ 
auto メ O O O 〇 メ ※ ※ 
left 3 O O 〇 O し 3 ※ ※ 
center メ O O O に 3 ※ に 3 
right X O O O x x x 
distnbute-letter ※ O O 〇 X ※ X 
distribute-space ※ O ! 1 O X ※ 06 
line-edge し 3 〇 〇 O メ メ ※ 
above ※ O O O X に 3 X 
inline も 3 O O O メ も 4 ※ 





※ Macintosh 版 IE5 は line-edge に 対応 し て いま せん 





テハ 中 


layout-qrid-mode: 廊 グリッド に 合わ せる 方 向 
layout-qrid-type: 区 グリ ッ ド に 合わ せる 方 法 


layout-qrid-iine: 人 行 送り 


layout-qgrid-char: 人 字 送 り 





支 *eece キ ー ワ ー ド 

see キー ワー ド 

人 る eeoe キ ー ワ ー ド 
サイ ズ を 表す 数 値 十 単 位 
パー セン ト を 表す 数 値 十 % 





縦横 の グリ ッ ド (マス 目 ) を 想定 し 、 そ の 中 に 文字 を 当て は め る よう 指定 し ます 。 
な お 、 フ ォ ン ト の 種類 や サイ ズ に よっ て は グリ ッ ド か ら 多少 ず れる こと も あり ます の で 注意 し 
て くだ さい 。 


layout-qrid-mode 
layout-grid-mode は 、 グ リッ ド に 合わ せる 方 向 を 指定 し ます 。 


both 行方 向 ・ 文 字 方 向 両 方 の グリ ッ ド に 合わ せる 
none グリ ッ ド を 無効 に する 

Hine 行方 向 の み グ リッ ド に 合わ せる 

char 文字 方 向 の み グ リッ ド に 合わ せる 


layout-qrid-type 
layout-grid-type は 、 グ リッ ド に 合わ せる 方 法 を 指定 し ます 。 
loose 全角 文字 や 半角 カナ を 、layout-grid-char で 指定 され た グリ ッ ド の 幅 に 
合わ せ て 間 を あけ て 配置 する (デフ ォ ル ト ) 
fixed すべ て の 文字 を グリ ッ ド の 中 心 に 配置 する 
strict 全角 文字 や 半角 カナ の み を グリ ッ ド の 中 心 に 配置 する 


layout-grid-tine、layout-qrid-char 
layout-grid-line は 行 送り (行間 )、layout-grid-char は 字 送 り の 幅 (文字 間 ) を 指定 し ます 。 
layout-grid-char や layout-grid-line を 有効 に する に は 、layout-grid-mode で line か 
both が 指定 され て いる 必要 が あり ます 。 


none 
auto 


グリ ッ ド を 設定 し な い (デフ ォ ル ト ) 
要素 中 で 最大 の フォ ント サイ ズ を グリ ッ ド の サイ ズ に 設定 する 


サイ ズ を 表す 数 値 十 単位 数値 に 単位 を な つけ て グリ ッ ド の サイ ズ を 設定 する 。 単位 に つい 


て は p.46 を 参照 し こく だ さい 


バ パーセント を 表す 数 値 十 % 親 要 素 の ボッ クス 領域 の サイ ズ に 対す る 割合 で 設定 する 


<html> 
<head> 


el== 


p 


} 

DP が Sop/e7 
DSg77p/e2 
P が Sg7/e3 
div 

ーー テ 
</style> 
</head> 
<bodV> 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> グリ ッ ド を 表示 し た い </title> 

<style type="text/css"> 


layout-qrid-type: fixedi 
layout-qrid-char: 30pX: 
layout-grid-iine: 30px: 
background-image:url("grid1.gif") 


<div>layout-grid-mode: both</div> 


{ 


{ layout-qrid-mode: both } 
{ Iayout-grid-mode: iine } 
{ layout-grid-mode: char } 
{ font: medium AriaLHelvetica,sans-serif } 





文字 を グリ ッ ド に お さめ た い 


テオ 


<P 1d="sg77p/e7 "> 

layout-grid 関連 の プロ パテ ィ を 使う と 、 日 本 語 や 韓国 語 、 中 国語 な どの 文字 を グリ ッ ド ( ま 
すめ ) に 当て は め て 配置 で を る よう に な り ま す 。 

</D> 


テ 紀 員 


<div>layout-grid-mode: ine</diV> 

<P id="sg/p/e2"> 

layout-grid 関連 の プロ パテ ィ を 使う と 、 日 本 語 や 韓国 語 、 中 国語 な どの 文字 を グリ ッ ド ( ま 
すめ ) に 当て は め て 配置 で きる よう に な り ま す 。 

</P> 


<div>layout-grid-mode: char</div> 

<P id="sg/p/e3"> 

layout-grid 関連 の プロ パティ を 使う と 、 日 本 語 や 韓国 語 、 中 国語 な どの 文字 を グリ ッ ド ( ま 
すめ ) に 当て は め て 配置 で きる よう に な り ま す 。 

</P> 


</body> 
</html> 











アイ ル 上 生 D の WO mc ウー ル D へ ルフ 
の の の の ws 衣 co 仙 7 の の は ・ > 回 ・』 基 
layout-grid-mode: both 


ialylolult|-lglrlild 癌 本 の ば 人 は ほし を 揚 け 代 日 本 語 や 韓国 
語 、 中 国語 な どの 文字 を グリ ッ ド (ます め ) に 当て は め て 配 全 で き 
る | よう | に | な り | ま す |。 


layout-grid-mode: line 


layout-grid 関 連 の プロ パテ ィ を 使う と . 日 本 語 や 韓国 語 . 中 国語 な どの 文字 を グリ ッ ド (ます め ) に 当て は め 
て 配置 で きる ろ よ うに な り ま す . 


layout-grid-mode: char 


よ | 


rli し の ブロ パラ: 
文字 を グプタ 1F 1( き 


! 
語 、 
る 








人 layout-grid-mode で line を 設 定 する と 行 送り が 、char を 設定 する と 字 送 り が グリ ッ ド に 揃い ます (ここ で は わか 
りや すく する た め に グリ ッ ド 線 の 画像 を 背景 に 表示 させ て いま す ) 








110 文字 を グリ ッ ド に お さめ た い 


AE 


・ (ティ を 使う な どの 文字 を グリ ッ ド | に 
(を 人 うら 、 日 や 本 どの を グリ ンド ( ま すめ ) に て は めで 


layout-grid-mode: line 


layout-grid 関 連 の プロ パテ ィ を 使う と 、 日 本 語 や 韓国 語 、 中 国語 な どの 文字 を グリッド (ます め ) に 当て は め て 配置 
で きる まう に な り ま す =ー 1 1 | ie 


layout-grid-mode: char 


layout-grid 関 連 の プロ パテ ィ を 使う と 、 日 本 語 や 韓国 語 . 中 国語 な どの 文字 を プリッ ド (まず すめ) に 当てはめ て 配置 
で きる よう に な り ます 。 





FN ュ ル ント : 売 了 (0211 ) 


人 Netscape は 対応 し て いま せん 












































layoutrgrid-mode IE4 1 IE5.5 1 コガ NN4 ドド N6.2 
none メ 〇 9 〇 ※ ※ メ 
both X※ O O X ※ ※ 
line メ ) の O メ メ ペ 
char メ 〇 O 〇 ※ ※ X 
layout-grid-type IE4 1 ゴ コ 1 王 た 】 IE6 NN4 ドド 条 4 ド に ルコ 
loose X り 1: O ※ ※ ※ 
fixed X O 〇 O し 3 ※ ※ 
strict し 3 O O O メ ※ に 3 
layout-grid-char IE4 1 1 王 た 】 1 ゴゴ NN4 NN4.7 が に ルル] 
auto ※ O O O に 3 X メ 
サイ ズ し 3 2 O O し 3 し 3 3 
バー セン ト し 3 O O 6 X 了 
layout-grid-line 1 ゴイ 3 1 1 土 胡 -】 1 コカ NN4 NN4.7 に に ルコ 
auto し 3 〇 〇 C ※ ※ 4 
サイ ズ 9 O O O ※ し 3 ※ 
バー セン ト X O O O x x ヌ 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
※ Macintosh 版 IE5 は 対応 し て いま せん 


相 。 グ リッ ド を 一 括 し て 指定 し た い …………ーーーーー p.112 
光 喝 


、 を グリッド E お さめ た い 111 


テテ せ 中 


layout-qrid: 丸 全 へ 





大 *weesslayout-grid-mode の 値 
寺 weeeeelayout-qrid-type の 値 
全 …eeeelayout-qrid-ine の 値 
人 へ eeeelaVout-qrid-char の 値 





グリ ッ ド に 関す る 各種 指定 を 一 括 し て 設定 し ます 。 

グリ ッ ド に 合わ せる 方 向 (layout-grid-mode)、 方 法 (layout-grid-type)、 行 送り 
(layout-grid-line)、 字 送り (layout-grid-char) の それ ぞ れ の 値 を 、 半 角 ス ペー ス で 区 切っ て 
任意 の 順番 で 指定 し ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htm charset=Shift_J1S"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> グリ ッ ド を 一 括 し て 指定 し た い </title> 
<stvle type="text/css"> 
<!-- 
p { 
font-size: 14pt: 
layout-qrid: fixed 30px 30px both: 
background-image: url("grid2.gqif") 


div {font: medium AriaLHelvetica,sans-serif } 


</style> 
</head> 








グリ ッ ド を 一 括 し て 指定 し た い 


<body> 

<divlayout-grid: fxed 30px 30px both</diV> 

5 衣 き 

jayout-grid 関連 の プロ パテ ィ を 使う と 、 日 本 語 や 韓国 語 、 中 国語 な どの 文字 を グリ ッ ド ( ま 
すめ ) に 当て は め て 配置 で を きる よう に な り ま す 。 

<7P> 

</bodV> 

</ html> 


テバ セコ 








ノ " 育 グリ ッ ド を 一 括 し て 指定 し た い - Microsof 
アイ ル 編集 ) 表示 お 気 に 入 0 ツー ル GD へ M プ ⑪ 
の 回 国人 の の 支 5RAO 休 の と 


layout-grid: fxed 30px 30px both: 








Talylelglt|- gr 人 半 6 ピ 
や 韓国 | 語 | 、| 中 | 国語 | な | ど と | の | 文字 | を | グ |! 


め て | 配置 | で | き | る | よ | う | に | な | り | ま | す |. | 












] バー ジ が 表示 され ま | mii 


4A ム ここ で は わか りや すく する た め に グリ ッ ド 線 の 画像 を 背景 に 表示 さ 





NN ガリ ッ ド を 一 括 し て 指定 し た い - Netscape 6 


|。 ア イル (5 編集 () 表示 ) 検索 ジャ ンプ ⑯ プッ マー の (B) 2D へ ルプ 





(9 いあ (9 の の" の om や wpc/(cesexAotehml。) シ oOo〔 ヵ | 還 
layout-grid: fxed 30px 30px both: 


の さこ ニュ ビニ ニコ ン ピ ン ンド エン こ 志 





ドキ ュ ルト: 玩 了 (2354 秒 ) 


4A Netscape は 対応 し て いま せん 








1 1 1 王 和 た IE6 NN4 NN4.7 に ル 4 
共通 ※ O O ( 
※ 週 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
※ Macintosh 版 IE5 は 対応 し て いま せん 


文字 を グリ ッ ド に お さめ た い … ド ーー 計 08 


〇 
※ 
※ 
※ 
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フォ ント を 指定 し た い 


font-family: 文 





支 eeeeee フ ォ ン ト 名 
キー ワー ド 






使用 する フォ ント を 指定 し ます 。 

複数 の 候補 を 指定 する と き は 、 そ れ ぞ れ を 「,] (カン マ ) で 区 切っ て 指定 し ます 。 そ の 場合 は 
並べ た 順に 優先 順位 が つき 、 先 に 指定 され て いる フォ ント が ユー ザー 側 の 環境 に な い 場 合 に は 、 
次 に 指定 され て いる フォ ント で 表示 を 試み る よう に な り ま す 。 

フォ ント の 指定 に は 、 フ ォ ン ト 名 に よる 方 法 と 、 キ ー ワ ー ド に よる 方 法 と が あり ます 。 


フォ ント 名 

フォ ント を 具体 的 な 名 前 で 指定 し ます 。 フ ォ ン ト の 名 前 は 文字 の 全角 や 半角 、 ス ペー ス な ども 
訪 め て 正しく 記述 し て くだ さい 。 フ ォ ン ト 名 に スペ ー ス が 含ま れ て いる 場合 は 引用 符 (「"」 また 
は 「」) で 囲む 必要 が あり ます 。 


キー ワー ド 

serif 明 朝 系 の フォ ント 

sans-serif ゴシック 系 の フォ ント 

cursive 筆記 体 ・ 草 書体 系 の フォ ント 

fantasy 装飾 が メイ ン と な っ て いる フォ ント 

monospace 等 幅 の フォ ント 

これ ら の キー ワー ド は フォ ント の 種類 を 表し ます 。 良 く 似 た 特徴 を 持つ フォ ント を カテ ゴリ 分 

けし た も の で 、 実際 に 表示 する 場合 に は ブラ ウザ に よっ て カテ ゴリ 内 か ら フ ォ ン ト が 1 種類 選択 
され ます 。 そ れ ぞ れ の キー ワー ド に 属す る フォ ント の 例 は 下 表 を 参照 し て くだ さい 。 


serf TimesNewRoman Garamond MSGeorgia 大 ミン リュ ウミ ン MS 明 朝 
sans-serif Helvetica MSArial MSVerdana 平成 角 ゴ シッ ク 新 ゴ シッ ク MS ゴシック 
cursive rc ん j み と (caflisch script) と xx (ex ponto) 
fantasy 錠 紳 き 財 虹 (crtte SCCIOZ (studz) 


monospace Courier MS Courier New 0saka- 等 幅 


人 各 キ ー ワ ー ド に 含ま れる フォ ント の 例 


フォ ント を 指定 し た い 


キー ワー ド に よる 指定 は 、 フ ォ ン ト 名 に よる 指定 が どれ も 有効 で な い 場 合 の 最終 的 な 選択 肢 に 
な る た め 、 指 定 し て お く こ と が 推 彰 さ れ て いま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> フォ ント を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

body { font-size: 25pt } 

div#sgp/e7 { font-family: "Times New Roman",senif } 





div#sgmpe2 { font-family: Impact,sans-serif } 
div#sgp/e3 {font-family: "MS P コ シッ ク ',0saka,sans-senf } 
div#sg7pfe4 {font-family: senif } 

ー テ > 

</style> 

</head> 

<bodyV> 

<div id="sgp(e7 ">font-family Property</ diV> 

<div id="sgp/e2">font-family Property</ diV> 

<div id="sg77p/e3 "> フォ ント を 指定 し ます 。</div> 
<div id="sgp/e4"> フォ ント を 指定 し ます 。</div> 
</body> 


</html> 











フォ ント を 指定 し た い 


テ ざ さき 
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テ ざ さき 


font-family Property 


fomt-family Properlv 
フォ ント を 指定 し ます 。 
フォ ント を 指定 し ます 。 


EYEEETTTPTT ED 定 P 


















fom-family Property 


フォ ント を 指定 し ます 。 
フォ ント を 指定 し ます 。 













フォ ント を 指定 する HTML タグ を CSS に 改め る EEE 


HTML タグ で フォ ント の 種類 を 指定 する に は 、 次 の よう に <font> タグ の face 属性 を 利用 し ます 。 
<font face=", 衣 ,……">ー</font> ( 廊 一 一 フォ ント 名 ) 




















<font> タグ は Deprecated (推奨 し な い ) と され て お り 、 表 示 フ ォ ン ト の 種類 は スタ イル シー ト で 指 
定 する こと が 推 さ れ て いま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の ひよ うに な り ま す 。 

















誤 {font-family: 支 , 誠 .…] ( 廊 ーー セ レク タ 衣 一 一 フ ォ ン ト 名 ) 

1 1 士 】 1 土生 1 コミ: NN4 NN4.7 に に ルコ 
フォ ント 名 〇 較 り 9 へ *1 へ 31 ) 
serif の 〇 へ *1 へ *1 ( 
sans-serif 〇 O め 和 メ ※ ( 
cursive O 〇 O C に 3 ) 
fantasy O O 還 3 2 O 
monospace O り O 9 人 4 ea O 





* ネ 1 : [ 字 コー ド セ ッ ト ] が 日 本 語 に な っ て いる と 正常 に 動作 し ませ ん 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


フォ ント サイ ズ を 指定 し た い ……ーーーーーーー P.117 フォ ント を 一 括 し て 指定 し た い ………… パ バド … p.130 
の フォ ント の 太 さ を 指定 し た い …ー… ド ーーーーー… p.12 ら 





NE 


font-size: 文 





大 ee サイズ を 表す 数 値 + 単位 
パー セン ト を 表す 数 値 +% 
キー ワー ド 
キー ワー ド (相対 的 な 指定 ) 





フォ ント の 大 き さ を 指定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単位 
数 値 に 単位 を つけ て フォ ント サイ ズ を 指定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 


パー セン ト を 表す 数 値 十 % 
親 要 素 の フォ ント サイ ズ に 対す る 割合 で 指定 し ます 。 た と えば 親 要素 が 10pt の 場合 に 1209% 
を 指定 する と 12pt に な り ます 。 


キー ワー ド 
xx-small 非常 に 小さ い 
x-small 小さ い 
small や や 小さ い 
medium 通常 の サイ ズ (デフ ォ ル ト ) 
large や や 大 きい 
x-larqge 大 きい 
xx-large 非常 に 大 きい 
フォ ント サイ ズ を 7 種類 の キー ワー ド で 指定 し ます 。xx-Small で も っ と も 小さ く 、xx-large 
で も っ と も 大 き な サ イズ に 設定 され ます 。CSS1 の 定義 で は 1.5 倍 ず つ 大 きく な る と いう 定義 で 
し た が 、CSS2 で は 1.2 倍 に 変更 され て いま す 。 実際 の 表示 は ブラ ウザ や フォ ント の 種類 に よっ 
て 異な る こと も あり ます 。 
な お 、CSS2 で は フォ ント サイ ズ の デフ ォ ル ト と し て medium が 定義 され て いま す が 、 
Internet Explorer で 標準 準拠 モー ド が 有効 に な っ て いる (Dp.51 参照 ) 場合 、 デ フォ ルト の フォ 
ント サイ ズ は medium で は な く small に な り ま す 。 
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キー ワー ド (相対 的 な 指定 ) 
larger 親 要 素 に 対し て 一 段階 大 きく 
smaller 親 要 素 に 対し て 一 段階 小さ く 
親 要 素 の フォ ント サイ ズ に 対す る 相対 的 な 大 き さ を 指定 し ます 。 こ れ ら の キー ワー ド を 設定 す 
る と 、 親 要素 の フォ ント サイ ズ に 従っ て 前 述 の 7 種類 の キー ワー ド を 解釈 し 、 フ ォ ン ト サ イ ズ を 
設定 し ます 。 た と えば 親 要素 の フォ ント サイ ズ が medium の 場合 に larger (一 段階 大 きく ) を 指 
定 す る と 、 フ ォ ン ト サ イ ズ は large に な り ま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<html> 
<head> 


AE | 


<meta http-equiv="Content-Type" content="text/html: charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title= フォ ント サイ ズ を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

span { marqin:10pt 5pt } 

SDan が sg/7p/e7 { font-size: 15pt } 

SDan が sg/7p/e2 { font-size: 2em } 

SDan が Sg/7/e3 { font-size: 120% } 

span が Sg/77p/e4 {font-size: 75% } 

SDan が Sg/7p/e5 { font-size: xx-small } 

Span が sg/7p/e6 { font-size: x-small } 

SDan が Sg/7/eZ { font-size: small } 

SDan#sg/7p/eg { font-size: medium } 

SDan#sg/7p/e9 { font-size: large } 

span が sg/p/e70 {font-size: x-large } 

SDan#sg77p/e77 {font-size: xx-larqe } 





span が sg77p/e72 {font-size: larger } 
span が sg/7p/e73 {font-size: smaller } 
span.initial { color: #ff0000 } 
ーー テ > 

</style> 

</head> 





118 フォ ント サイ ズ を 指定 し た い 





<bodV> 

<PD> 

<Sspan class="1nitial"> 初期 値 (default) </span> 
<span id="sgp/e7 ">15pt を 指定 </span> 
<span id="sg 罰 pe2">2em を 指定 </span> 

</P> 

<D テ > 

<span class="1nitial"> 初期 値 (default) </span> 
<sDan 1d= "sg7p/e3">12096 を 指定 </Span> 
<span id= "sg7p/e4">7596 を 指定 </span> 

</D> 

<D テ > 

<span id="sgp(e5">xx-small</sDan><br> 
<span id="sg7p/e6">x-small</span><br> 
<sDan id="sg7D/e7">small</span><br> 

<span id="sg/p/e8">medium</span><br> 
<SDan id= "sg77p/e9">large</sDan><br> 

<span id="sg77p/e70">x-large</span> <br> 
<span id="sg77p/e77">xx-large</SDan> 

</P> 

<D> 

<span class="initial"> 初期 値 (default) </Span> 
<span id="sg77p/e72">larger を 指定 </span> 


<span id="sg7pe73">smaller を 指定 </sDan> 
</P> 

</bodV> 

</html> 


テ ざ きい 
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テコ 


初期 値 (dsfsult) 120% を 指定 7pwe 折 


orsmal 
xsmall 


small 
madium 
large 


x-large 
xx-large 


初期 値 (sfsut) larger を 指定 smaler を 指定 





9 代 Gasuo is を 指定 2em を 指定 
初期 人 (defaul) 120% を 指定 7sx 才 e 


x-large 
XX-large 
初期 値 (dsfaul larger を 指定 smale を 指定 








の i' ワ ャ ネネ ュ ネネ ュ ュ ュ ワ }〕}} る ーー 


HTML タグ で フォ ント の サイ ズ を 指定 する に は 、 次 の よう に <font> タグ の size 属性 を 利用 し ます 。 
<font size=" 衣 "> ーー</font> 絶対 的 な 指定 (太一 一 1 一 7) 
<basefont size=" 人 "><font size=" 士 "テー</font> 


相対 的 な 指定 (ムーー1ー7 ヘーー ム と の 土 が 7 に な る 数 値 ) 4 
<big> </big> 大 きめ の 
<small> </small> 小さ め ト 


<font> タグ は Deprecated (推奨 し な い ) と され て お り 、 フ ォ ン ト サ イ ズ は スタ イル シー ト で 指定 す 
る こと が 推奨 され て いま す 。 ま た 、HTML タグ で は 絶対 的 ・ 相 対 的 どちら の 場合 も 、7 段階 の サイ ズ 指 定 
し か で きま せん が 、 ス タイ ル シ ー ト を 使う と 詳細 で 柔軟 な サイ ズ 指 定 が 可能 で す 。 同様 の 効果 を スタ イル 
シー ト で 表現 する と 以下 の よう に な り ま す 。 











人 [font-size: へ) の 単位 に よっ て 絶対 的 ・ 相 対 的 の どちら も 可能 (ツーー サ イズ ) 
人 [font-size: larger } 大 きめ 
[font-size: smaller } 小さ め 
一 セレ クタ 
|! IE5 1 王 和 た 1 ココ NN4 NN4.7 ド に ルス 
サイ ズ O O O O O 〇 O 
パー セン ト O O O O O 〇 O O 〇 
キー ワー ド O O @ O O 〇 O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
。 行 の 高 さ を 設 定 し た い ーー piB6 フォ ント を 一 括 し て 指定 し た い …… パ バー p.180 
放牧 連 フォ ント の 太 さ を 指定 じたい p.18g 





テ ざ さき 


font-weiqht: 文 





支 *eeee キ ー ワ ー ド 
数 値 





フォ ント の 太 さ を 指定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


数 値 
100,200,300,400,500,600,700,800,900 
標準 の 大 き さ を 400 と し 、 数 値 が 大 きく な れ ば より 大 き な フ ォ ン ト 、 数 値 が 小 べ け く な れ ば よ 
り 小 さ な フ ォ ン ト に 設定 され ます 。 た いて い の フ ォ ン ト は これ ら の 9 種類 の 太 さ を すべ て 揃え て 
いる わけ で は な く 、 ま た ブラ ウザ に よっ て も 太 さ の 解釈 が 異な り ま す 。 そ の た め 指 定 し た 値 に よ 
つて は 太 さ が 変わ ら な いこ と も あり ます 。 
Internet Explorer に お ける 主 な フォ ント の 対応 状況 は 以下 の ひと お り で す 。 


本 3 II 
は 600 





MS 明 朝 
MS ゴシック 400 600 
Arail 400 600 700 900 
Bookman 0ld Style 400 500 600 800 
Comic Suns MS 400 600 700 900 
Courer 400 600 700 900 
Garamomd 。。 400 600 700 900 
Times NewRoman 。。 400 600 700 900 
人 実際 に 表示 され る フォ ント サイ ズ 
キー ワー ド 
normal 標準 の 大 き さ (デフ ォ ル ト ) 
bold 太字 


bolder 一 段階 太く 
tighter 一 段階 細く 
bold を 指定 する と 、 太 字 に な り 、700 を 指定 し た 場合 と 同じ 結果 に な り ま す 。 
bolder と lighter で は その 時 点 で の 太 さ より も 一 段階 太く 、 あ る い は 一 段階 細く な り ま す 。 指 


122 フォ ント の 太 さ を 指定 し た い 


定 され た 値 の 太 さ が 存 在 し な い 場 合 に は プロ パテ ィ の 値 は 変更 され ます が 、 表 示さ れる 太 さ は 変 
わり ませ ん 。 ま た 、900 が 設定 され て いる 場合 に より 大 き な 値 を 指定 する こと は で きま せん し 、 


100 が 設定 され て いる 場合 に より 小さ な 値 を 指定 する こと も で きま せん 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> フォ ント の 大 き さ を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

body { 
font-family: "Times New Roman",senif 
font-size:25pt 

} 

span { margin:10pt 5pt } 

span が Sg/7p/e7 { font-weiqht: 100 } 

SDan が Sg/7p/e2 { font-weight: 200 } 

span が 5o77D/e3 { font-weiqht: 300 } 

SDan#Sg/7p/e4 { font-weight: 400 } 

spDan#Sg77p/e5 { font-weight: 500 } 

span が Sg/7p/e6 { font-weiqht: 600 } 

spDan が Sp/eZ { font-weight: 700 } 

span が sg/7p/eg8 { font-weight: 800 } 

sDan が Sg77p/e9 { font-weight: 900 } 

span が sgp/e70 {font-weight: bold } 

span が sg77p/e77 {font-weight: bolder } 

span が spfe72 {font-weight: ighter } 

ーー テ 

</style> 

</head> 

<bodV> 


<diV> 





フォ ント の 太 さ を 指定 し た い 
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<SDan id="sg7p/e7">100</span><span id="sgp/e2">200</span> 
<Span id="sg77p/e3">300</span><span id="sg7pfe4">400</span> 
<Span id="sg77p/e5">500</span><span id="sg77p/e6">600</span> 
<Span id="sg77p/eZ">700</span><span id="sg77p/e8">800</span> 
<sPan id="sg7mp/e9">900</span> 

</div> 

<div> 

<Span>normal</sDan><span id="sg7p/e70">bold</span> 

<Span id="sg77p/e77">bolder</span><span id="sgp/e72">lighter</span> 
</ div> 

</body> 

</htm に > 

















100 200 300 400 300 600 700 Ss00 900 
normal hold bolder lighter 











| 。 NsascosAox ccco7oooOGhm | 
100 200 300 400 300 600 700 800 900 


| normal hold bolder lighter 








フォ ント の 太 さ を 指定 する HTML タグ を CSS に 改め る EECCCOACCOUAACCLLLCTD 


HTML タグ で 太字 フォ ント を 指定 する に は 、<b> タグ を 使用 し ます 。 
<b> </b> 


HTML タグ で フォ ント の 太 さ を 指定 する に は <b> タグ し か あり ませ ん が (<strong> な ど 諭 理 的 定義 
の 結果 と し て ブラ ウザ 側 で 太字 表示 する タグ は 除く )、 ス タイ ル シ ー ト な ら 細 字 に する こと も で きる ほか 、 
太 さ の 度合 い に つ いて も 細か く 指定 する こと が で きま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 
の よう に な り ま す 。 


テ ざ さき 














支 [font-weight: bold } ( 衣 一 セレ クタ ) 
1 1 1 主 た 】 IE6 NN4 ドド じ 完 4 ド に に ル 
100 一 900 メ O O O O O O 
normal O O O O O O O 
bold O O O O O O O 
bolder X O O O O O 〇 
lighter メ O O O O O O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


陣 、 フォ ント サイ ズ を 指定 し た い ………ーーーー バ バー p11 フ 
牧 ア フォ ント を 一 括 し て 指定 し た い ……ー ド ーーー p.130 


せ 
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font-style: 


はり | 


ォ ン ト を 斜体 に し た い 


文 








支 *eeeees キ ー ワ ー ド 









文字 を 斜体 に し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
italic 斜体 
oblique 仙 体 
normal 通常 の 状態 で 表示 (デフ ォ ルト ) 


厳密 な 定義 に よれ ば italic と oblique は 異な り ま す 。 し か し 、 現 在 の と ころ 一 般 的 な ブラ ウザ 
で は その 違い を 区 別して お ら ず 、 同 じ よ うに 表示 され ます 。 


> 。。 も 0 年 CWNNINOOGR2R 


<html> 
<head> 
<meta http-eq 
<meta http-eq 


<!-- 

body 
P#Sg77p/e7 
P#sg77p/e2 
DP#So77p/e3 
ーー ニテ 
</style> 
</head> 
<bodV> 





フォ ント を 斜体 に し た い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<title> 文字 を 斜体 に し た い </title> 
<style type="text/css"> 


uiv="Content-Type" content="text/htmb charset=Shift_JIS"> 
uiv="Content-Style-Type" content="text/css"> 


{ font-size: 20pt } 

{ font-style: italic } 

{ font-style: obiique } 
{ font-style: normal } 





<P id="sg/p/e7 ">font-style: italic を 指定 し て いま す 。</p> 
<D id="sg/p/e2">font-style: oblique を 指定 し て いま す 。</p> 
<P id="sgmp/e3">font-style: normal を 指定 し て いま す 。</P> 
</body> 

</htm に > 





テコ 


。。 年 文字 を 妊 体 に し た い - Microsoft jnternet Explorer lg 区 
ア アイ ル (編集) 表示 お 気 に 和 AD⑯ ツー- ル ①D へ ルプ ⑪ 『 コ 
OR の 回 回 の の ww 支 9moo 仙 ウ の の 竹久 回 ・ 同 の moo 


7 た se- が 7c を 葵 症 し て いま ず 。 


7 に s む 7e- o67goe を 基 定 し て いい まず 。 
font-style: normal を 指定 し て いま す 。 











、 文字 を 料 体 に し た い - Netscape 6 


p PP っ 7 し て て / ) ま テ 。 


ん に s む 7e: o の 7/e を 意 定 し て まず 。 
font-style: normal を 指定 し て いま す 。 








貸 体 を 指定 する HTML タグ を CSS に 改め る RCCCCCCCCCCCCCCCCEECPCLLCECCELCCPYY 


HTML タグ で 斜体 を 指定 する に は 、<i> タグ を 利用 し ます 。 


<> </j> 


同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 











支 {font-style: 支 } ( 文 ーー セレクタ 一 italic また は oblique) 
IE4 1 1 |: NN4 NN4.7 ドル 

italic O O O O O O O 
oblique O O O O ※ に 3 〇 
normal O O O O O O O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 

参 昭 文字 を 閉 侯 し た 0 で eeeeeeeeeeeeeeeeetsee| p.60 

2 フォ ント を 一 括 し て 指定 し た い …………………… p.130 
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テ ざ さき ト ュ ! 


font-variant: 文 





支 *eees キ ー ワ ー ド 





文字 を スモ ー ル キャ ピタ ル に 指定 し ます 。 
スモ ー ル キャ ピタ ル と は 、 大 文字 の 字体 を 小さ くし た 表示 で す 。 た と えば 一 般 的 に は 大 文字 
AB,C.… に 対す る 小文字 は a,b,c.…- と な り ま す が 、 ス モー ルキ ャ ピタ ル を 指定 する と 、 小 文字 で あ 
っ て も AL.B,C.… と すべ て 大 文字 に 変換 され 、 か つ 通常 より や や 小さ な サイ ズ で 表示 され ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
small-caps スモー ルキ ャ ピタ ル に 置換 
normal 通常 の 状態 で 表示 (デフ ォ ル ト ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 文字 に スモ ー ル キャ ピタ ル を 指定 し た い </ せ itle> 

<stvle type="text/css"> 

<!-- 

div#sg7pfe7 {font-variant: normal } 

div#sg7p/e2 { font-variant: small-caps } 

ーー テ 

</style> 

</head> 

<body> 

<div id="sgpfe7">【font-variant: normal】 を 指定 し て いま す 。</diV> 
<div id="sgp/e2">【font-variant: smalcaps】 を 指定 し て いま す 。</div> 
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<div>【FONT-VARIANT:SMALL-CAPS】 を 指定 し て いま せん 。</div> 
</body> 


</html> 


当 文字 に スモ ー ル キャ ピタ ル を 指定 し た い - Microsoft Imternet Explorer 
アイ ル (E) 編集 E) 表示 お気 に 入 D ウー ル D へ ルプ ⑱ 





【font-variant: normal】 を 指定 し て いま す 。 
【FONT-VARIANT: SMALL-CAPS】 を 指定 し て いま す 。 
【FONT-VARIANTSMALL-CAPS】 を 指定 し て いま せん 。 











N 文字 に スモ ー ル キャ ピタ ル を 指定 し た い - Netscape 6 





| 2 Simsressscon/tookcc7/s コ - 


【font-variant: normal を 指定 し て いま す 。 
【FoNr-vARIANT SMALL-CAPS】 を 指定 し て いま す 。 
【FONT-VARIANTSMALL-OAPS】 を 揚 定 し て し \ ま せん 。 




















1 世 3 1 キ 】 IE5.5 IE6 ドド! NN4.7 N6.2 
smalLcaps O O 〇 O し 3 に 3 O O 
normal O O O ※ ※ O O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
参照 大 文字 ・ 小 文字 に 置換 し た い ……… バ ーー p.63 
フォ ント を 一括 し て 指定 し た い ………… ド ーー p130 
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フォ ント を 一 括 し て 指定 し た い 


font: 文 之 全 へ / マ ヤマ 





文 *eeeefont-style の 値 (斜体 ) 
*xfont-variant の 値 (スモ ー ル キャ ピタ ル ) 
*font-weight の 値 (フォ ント の 太 さ ) 

人 weeeefont-size の 値 (フォ ント サイ ズ ) 
ママ eeline-height の 値 ( 行 の 高 さ ) 
マ ャ essefont-family の 値 (フォ ント 名 ) 






フォ ント に 関す る 種 指定 を まとめ て 設定 し ます 。 

必要 な 値 を 半角 スペ ー ス で 区 切っ て 指定 し ます 。 た だ し 、font プロ パテ ィ の 場合 は 他 の 一 括 設 
定 が 可能 な プロ パテ ィ と は 異な り 、 次 の よう な 規則 が ある の で 注意 が 必要 で す 。 

w font-style、font-variant、font-weight は 、 順 序 を 入れ 替え て 指定 する こと が で きる 

w line-height は font-size の あと に スラ ッシュ (/) を つけ て 数 値 を 指定 

w font-size と font-family の 値 は 省略 で き な い 

* 各 属性 の 値 を 省略 し た 場合 は 、 そ れ ぞ れ の デフ ォ ル ト 値 が 適用 され る 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> フォ ント を 一 括 し て 指定 し た い </ttle> 
<stvle type="text/css"> 
<!-- 
div { 
width: 350px: 
padding: 20px: 
background-color: #ffcccc 








フォ ント を 一 括 し て 指定 し た い 




















が Sg77p/e7 { 
font: itaiic 700 50px "Times New Roman",serif 


テ ざ さき ュ コ 


color: 計 f0066 

} 

が Sg77p/e2 { 
font: bold x-small "MS P 明 朝 ", 平 成 明 朝 ,serif: 
color: #008080 

} 





#sg7p/e3 { font: small/2em "MS P コ ゴシック",0saka,sans-serif } 

ーー テ 

</style> 

</head> 

<bodV> 

<diV> 

<SDan id="sg7p/e7 ">CSS</span> 

<span id="sg7pfe2">- ス タイ ル シ ー ト -</span> 

<P id="sg7p/e3"> ス タイ ル シ ー ト は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ の レイ ア 
ウト を 定義 する 技術 ] と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 
指定 と を 分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう 
と いう 姿勢 の も と に 生み 出さ れ ま し た 。</P> 

</div> 

</bodV> 

</html> 
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才 ウ サント を : つ 概 れ で 区 だ : 衝 な 756z 人 7 E5J25 
イル 罰 家 ) 表示 0 お % に AOQO ツー ル D へ ルプ 


@*・ の 回 回 る の we 吉 eoo の yo の ら - 有 > 四 ・ 向 2 


テ ざ さい 






























1 ズ ! IE5 1 王 ] 1 ヨゴ NN4 NN4.7 が に ルオ 
共通 O O O O O O O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
Sh、 行 の 高 さ を 設定 し た い フォ ント を 斜体 に し た い ・… p.126 
フォ ント を 指定 し た い 文字 に スモ ー ル キャ ビタ ル を 指定 し た い ・ p.188 
フォ ント サイ ズ を 指定 し た い シス テム フォ ント を 利用 し た い 





フォ ント の 太 さ を 指定 し た い …・ 
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font: 文 





支 *eeeee キ ー ワ ー ド 


シス テム フォ ント を 指定 し ます 。 

Windows を は じ め と する GUI 環境 で は 、 メ ニュ ー や メッ セー ジ ボ ッ クス な ど で 使 用 する フォ 
ント の 設定 が あら か じ め 用 意 さ れ て お り 、 ス タイ ル シ ー ト か ら そ の 設定 を 呼び 出し て 、Web ペー 
ジ に 使う こと が で きま す 。 

値 に は 以下 の キー ワー ド が あり ます 。 


icon アイ コン の 名 前 に 使用 され る フォ ント 

menu メニ ュー で 使用 され る フォ ント 

message-box ダイ アロ グ ボ ックス で 使用 され る フォ ント 
caption キャ ブシ ョ ン や ラベ ル に 使用 され る フォ ント 
status-bar ウイ ンド ウ の ステ ー タ スバ ー で 使用 され る フォ ント 


Windows XP の 場合 、、 シ ステ ム フ ォ ント は [スタ ー ト ] 一 [コン トロ ー ル バネ ル ] を 選ん 
で [画面 ] を 開き 、[ デ ザイ ン ] タブ に 設定 が 記さ れ て いま す 。 

な お 、 本 来 な ら ば Internet Explorer と Netscape (Navigator) で シス テム の 同一 の 値 を 参 
照 す る は ず で す が 、 実際 は 違う 値 を 参照 し て お り 、 結果 と し て 両者 で は 異な っ た 表示 に な り ま す 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> シス テム フォ ント を 利用 し た い </title> 

<style type="text/css"> 


2 








テ ざ さき 
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.Sg77D/e7 { font: icon } 

.Sg77D/e2 { font: menu } 

・S77/e3 { font: message-box } 

-Sg77P/e4 {font: caption } 

.S77/e5 { font: status-bar } 

== 

</style> 

</head> 

<bodV> 

<pP> シス テム フォ ント を 利用 する 場合 は 、font プロ パテ ィ の 値 に 次 の キー ワー ド を 指定 し ま 
す 。</P> 

<P Class="sg/7p/e7 ">icon… ア イコ ン の 名 前 に 使用 され る フォ ント 。</D> 

<P Class="sg/p/e2">menu … メ ニュ ー で 使用 され る フォ ント 。</D> 

<D Class="sg/7p/e3 ">message-box … ダ イア ログ ボッ クス で 使用 され る フォ ント 。 </D> 

<P class="sg/p/e4 ">caption … キ ャ ブシ ョ ン や ラベ ル に 使用 され る フォ ント 。</p> 

<P class="sg/p/e5">status-bar … ウ イン ドウ の ステ ー タ スバ ー で 使用 され る フォ ント 。 </p> 
</bodV> 

</html> 














ヨ シス テム フォ ント を 簡 同 し だ いい - 有 Mioroso 和 nferne Expjorer 回 に 
ファ イル E) 規 梨 人 E) 表示 (Y) お 気に入り (A) ツー ル (T) ヘル プ (H 『 コ 


戻る ・@ 回 回 の 検索 お 気に入り 侍 メ ディ ア @ 全編 の zo| 
シス テム フォ ント を 利用 する 場合 は 、 fobnt ブ プロ パテ ィ の 値 に 次 の キー ワー ド を 指定 し ます 。 


icon… ア イコ ン の 名 前 に 使用 され る フォ ント 。 


menu… メ ニュ ー で 使用 され る フォ ント 。 
meSSage-b0X… ダ イア ログ ボッ クス で 使用 され る フォ ント 。. 
capfion… キ ャ フシ ョ ン や ラベ ル に 使用 され る フォ ント 。 
status-bar… ウ イン ドウ の ステ ー タ スバ ー で 使用 され る フォ ント 。 





人 ムコ ユー ザー の シス テム の 設定 に よっ て 表示 され る フォ ント は 異な り ます 
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(》 《⑳ Oo/…=*ー=coetoe ん owlo ご ] 
シス テム フォ ント を 利用 する 場合 は 、 fobrt プ ロ パ ティ の 値 に 次 の キー ワー ド を 指定 し ます 。 


jcon アイ コン の 名 前 に 使用 され る フォ ント 。 


menu メニ ュー で 依 用 きれ る フォ ント 。 


message-box… ダ イア ログ ボッ クス で 大手 され る フォ ント -。 
captiorr… キ ャ プシ ジョ ン や ラベ ル に 使用 まれ る フォ ント 。 
status-bar… ウ イン ドウ の ステ ー タ スバ ー で 使用 され る フォ ント 。 


レト | 











ファ イル (EE) 次 入 (E) 表示 (Y) ち 気 に 入り (A) ツー ル (T) ヘル プ (B 
の 族 検 索 双 フォ ル ダ 
コン トロ ー ル パネ ル 


関連 項目 
で oe teae 
め けり ポー ト 





を し て いる 場合 の 表示 例 と な り ま す 





人 ム ブ ラウ ザ の 画面 は 、 シ ステ ム に この よう な フォ ン 

















1 マズ! 1 1 コ NN4 NN4.7 に ル ] 
icon X の き ※ X 〇 
menu X 9 ※ ※ 〇 
messade-box メ ※ る X 3 〇 
status-bar に 3 も 3 メ し 3 O 
caption メ り 人 2 ※ 96 〇 





※ 財 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
フォ ント を 一 括 し て 指定 し た い … バ ーーー 
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けり | 


backqround-color: 文 





支 *ece キ ー ワ ー ド 
色 指 定 値 





要素 の 背景 色 を 指定 し ます 。 

色 は RGB 値 、 キ ー ワ ー ド 、 transparent (透明 ) の いずれ か で 指定 し ます 。 transparent を 
指定 する と 背景 が 透明 に な り 、 結 果 と し て 親 ボ ックス の 背景 色 が 透け て 見 える よう に な り ま す 。 

色 の 詳し い 指定 方 法 に つい て は p.47 を 参照 し て くだ さい 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content= "text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 背景 色 を 指定 し た い </title> 

<style type="text/css"> 

<!-- 


body { background-color: ffcc99 } 


h1 { 
background-color: #ff0000: 
color: fffff 

} 

div 人 { 


width: 600px: 
padding: 20px: 
font-size: 12pt: 
iine-heiqht: 2em: 








background-color: #ffffcc 








} 

span { 
border: 2px dotted #ff0066: 
backqround-color: #33ffcc 

} 

</style> 

</head> 


<bodV> 

<h1> スタ イル シー ト と は </h1> 

<div> 

Web ペー ジ を 記述 する HTML は 、<span> 文書 の 論理 的 な 構造 を 示す 言語 </span> で す 。 
た と えば 、 見 出し が あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの 
よう な 要素 で 構成 され て いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を 
も っ て いる の か を 、 コ ンピュータ に 知ら せる た め の 言 語 な の で す 。 表 現 方 法 を 指定 する た め 
の 言語 で は あり ませ ん 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指 
定 、 レ イア ウト の た め の テ ー ブ ル の 利用 な ど 、 文 書 の 体裁 、 つ まり 見 栄え まで も 定義 する よ 
うに な っ て いき まし た 。W3C で は この 状況 を 改め る た め 、<spanz> 構造 に 関す る 指定 と 体 
裁 に 関わ る 指定 と を 分 離さ せ </span>、HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 
方 法 を 導入 し よう と 考え る よう に な り ま し た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の が 
<Span> スタ イル シー ト の 概念 </span> で す 。 

</div> 

</bodV> 


</htm> 
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当 背景 色 を 指定 し た い - Microsoft Internet Explg 
プイ ル (5 参集) お 気に入り ツー- ル ①D へ 2 


GO 回 還 の の we 吉 pmoo の 7o の 人 肝 四 ・ 


スタ イル シー ト と は ( 


Web ペ ー ジ を 記述 する HTM_ は 、 敵 計 王 陽 昌 細 細 還 還 計 細 で す . /- と えば 

見 出し が あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう な 
要 乗 で 構成 され て いる の か 、 また ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 
を も っ て いる の か を 、 コン ピュ ー タ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 
する た め の 言語 で は あり ませ ん 。 し か し 実際 は 、 Web の 発展 に と も な い 、 色 や フォ ント 
サイ ズ の 指定 、 レイ アウ ト の た の の テー ブル の 利用 な ど 、 文書 の 体裁 、 つま り 見 栄え 
まで も 定義 する よう に な っ て いき まし た 。 WaC で は この 状況 を 改め る た の 、 議 議 議 識 
還 軸 NIRESM mA の 機能 で は な い 体 封 の 制御 に つ 
いて は 別 の 方 法 を 導入 し よう と 考え る よう に な り ま し た 。 こう し た 姿勢 の も と に 生み 出 


され た の が 回 還 天 で 


[回 バージ KS れ まい た 1 の イター ネッ ト 








N 背 色 を 搬 Netscape 6 


Web ペ ー ジ を 記述 する HTM_ は 、 関 識 古 記章 講 光 源 革 庫 で す . た と え は ば. 見 出し 

が あり 、 本 文 の 中 に 段 了 座 や リス ト が あり …… と いっ た よう に . 文書 が どの よう な 要素 で 構成 
され て いる の か 、 また ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か 
を 、 コン ピュ ー タ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 する た め の 言 語 で は あ 

り ま せん 。 し か し 実際 は 、 Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レイ アウ ト の 

た め の テ ー ブ ル の 利用 ね ど 、 文書 の 体裁 、 つま り 見 栄え まで も 定義 する よう に な っ て いき ま 
し た 。 WGC で は この 状況 を 改め る た め .、 講 軒 国 開 間 敵 上 記 回 還 雪上 間 ね 太目 中 EN 
識 HTM の 機能 で は な い 体 基 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り 
まし た 。 こ うし た 姿 振 の も と に 生み 出さ れ た の が 回 証 還 語 R 欄 菩 で す 。 
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CSS に お ける 青 景 SRCCEECECCCCECCCCCCCCCCCCCCCCCUCCCCCCCCCCCCCOLCCCCCCCCCCCCCCLL い 


CSS で 「 背 景 」 と いう 場合 、 要 素 が 生成 する ボッ クス の うち 、 内 容 領域 と バディ ング の 背景 を 意味 し 
ます 。 ボ ー ダ ー の 色 は 専用 の プロ パテ ィ (border-color な ど ) で 設定 し 、 マ ー ジ ン は 常に 透明 な の で 親 
ボッ クス の 背景 が 透け て 見 える こと に な り ま す 。 ボ ックス の 概念 に つい て は p.45 を 参照 し こく だ さい 。 


PCOTYYYYTYYKYIIKKIXNKKXLKKXAKKKKIKKKAAKKKXKLKRARLKRLAYRKRKIEKIYRKRRRKRERXKKIRKKRR】 


背景 色 を 指定 する HTML タグ を CSS に 改め る RECECCCCCCCCCCCCECCOCFFCCUCLTECPCTKTYP 


HTML タグ で 背景 色 を 指定 する に は 、 次 の よう に 背景 色 を 指定 で きる タグ の bgcolor 属性 を 利用 し ま 
す 。 


<body bqcolor=" 友 "> 一 </body> ペー ジ 全 体 の 背景 色 

<table bgcolor=" 友 "> ーー</table> テー ブル の 背景 色 

< の bgcolor=" 廊 "テー</ の > セル の 背景 色 ( 〇 ーーtr、th、td) 
<marquee bgcolor=" 廊 ">ー- </marquee> マー キー の 背景 色 


一 色 の 指定 値 


HTML タグ の bgcolor 属性 は Deprecated ( 推 し な い ) と され て お り 、 背 景色 は スタ イル シー ト で 
指定 する こと が 推奨 され て いま す 。 ま た 、 ス タイ ル シ ー ト を 使え ば 上 記 の タグ に 限ら ず す べ て の 要素 に 背 
景色 を 指定 する こと が で きま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 


























body { backqround-color: 文 } ペー ジ 全 体 の 背景 色 

table { backqround-color: 支 } テー ブル の 背景 色 

{ backgqround-color: 文 } セル の 背景 色 (ーーtr、th、td) 

marquee {background-color: 文 } マー キー の 背景 色 

太一 色 の 指定 値 

1】 1 三 】 1 王 二 】 IE6 NN4 ICE 完 』 に に 
色 名 O O O O O O O 
シス テム カラ ー O O O O メ メ O 
transparent O O 〇 O O ※ 3 O 
gb O O O O O O 〇 
frggbb O O O O O O O 
rgb(%.%,%) O O O O O O O 
rgb(,.) O O O O O O O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
文字 色 を 指定 し た い ド ドド ドド ドド ーー ツー p.56 背景 を 一 括 し て 指定 し た い …… じ ドド ドド p.157 
に 痛 景 画像 を 指定 し た いい p.140 
背景 色 を 指定 し た い 
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けい. いり) 


backqround-imaqe: 文 





文 *eeeeeURL 
キー ワー ド 





要素 の 背景 に 画像 を 配置 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


URL 
background-image: url(" 式 "): 支 …… 画 像 ファ イル の URL 
表示 させ る 画像 ファ イル の URL を 上 記 の 形式 で 指定 し ます 。 
な お 、HTML 文書 か ら 外部 スタ イル シー ト を 読み 込む 場合 は 、HTML 文書 か ら の 相対 URL で 
は な く 、 ス タイ ルフ ァイル か ら の 相対 URL で 指定 し な く て は な り ま せん 。 詳細 は p.50 を 参照 し 
て くだ さい 。 


キー ワー ド 
none 画像 を 表示 し な い (デフ ォ ル ト ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 背景 画像 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { 
background-image: url("cat1.qif"): 
background-color: #ffcc99 














| 語 
backqround-color: #ff0000: 


color: ffffff 

} 

div { 
width: 600px: 
padding: 20px: 
font-size: 12pt: 
line-height: 2em: 
backqround-image: url("bg1.gif"): 
backqround-color: 寺 fffcc 

} 

span { 
border: 2px dotted #ff0066: 
backqround-color: #33ffcc 

} 

ーー テ 

</style> 

</head> 

<body> 

<h1> スタ イル シー ト と は </h1> 

<diV> 


Web ペー ジ を 記述 する HTML は 、<span> 文書 の 論理 的 な 構造 を 示す 言語 </spDan> で す 。 

た と えば 、 見 出し が あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの 

よう な 要素 で 構成 され て いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を 

も っ て いる の か を 、 コ ンピュータ に 知ら せる た め の 言 語 な の で す 。 表 現 方 法 を 指定 する た め 
言語 で は あり ませ ん 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指 

定 、 レ イア ウト の た め の テ ー ブ ル の 利用 な ど 、 文 書 の 体 坊 、 つ まり 見 栄え まで も 定義 する よ 

うに な っ て いき まし た 。 W3C で は この 状況 を 改め る た め 、<span> 構造 に 関す る 指定 と 体 

裁 に 関わ る 指定 と を 分 離さ せ </span>、HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 

方 法 を 導入 し よう と 考え る よう に な り ま し た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の が 

<span> スタ イル シー ト の 概念 </span> で す 。 

</div> 

</bodV> 

</htm> 























Web ペ ー ジ を 記述 する HTM_ は 、 敵 還 証 議 交 回 引 請 間 計 調 で す . /- と えば . 
見 HH し が あり 、 本 文 の 中 に 肌 除 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう な 
要素 で 構成 れ て いる の か 、 また ある 待 定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 
を も っ て いる の か を 、 コン ピュ ー タ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 
する た め の 言語 で は あり ませ ん 。 し か し 実際 は 、 Web の 発展 に と も な い 、 色 や フォ ント 
サイ ズ の 指定 . レイ アウ ト の た め の テ ー ブ ル の 利用 な ど . 文書 の 体裁 . つま り 見 栄え 
まで も 定義 する よう に な っ て いき まし た 。 WGC で は この 状況 を 改 の る た め 、 計 較 還 開 
本 較 押 昌義 記 M 還 間 mM の 機能 で は な い 体 裁 の 制御 に つ 


いて は 別 の 方 法 を 導入 し よう た 考え る よう に な り ま し た 。 こう し た 雇 勢 の も と に 生み 出 


さ た の が 2 基 で *. 












イン ター ネッ ト 











記述 する HTM_ は 、 図 証 謗 環 丘 村 放 大 詳 語 で す . た と えば は. 見 出し 
が あり 、 本 文 の 中 に 段 共 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう な 要素 で 構成 
され て いる の か 、 また ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か 


を 、 コン ピュ ー タ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 する た め の 言語 で は あ 
り ま せん 。 し か し 実際 は 、 Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 レイ アウ ト の 
た め の テ ー ブ ル の 利用 な ど 、 文書 の 体裁 つま り 見 栄え まで も 定義 せる よう に な っ て いき ま 
し た . MGC で は この 状況 を 改め る た め 、 講 誕 聞 訂 記 詳 選 回 抽 度 旧 間 本店 志 5 導き 
入 HmM の 機能 で (は な い 体 苦 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り 


まし た 。 こ うし た 姿 鈴 の も と に 生み 出さ れ た の が 敵 証 請 朗 R9 林 補 で す . 











人 body 要素 の 背景 に 使用 し た cat1.gff Adiv 要 素 の 背景 に 使用 し た bg1.gf 
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文字 の 読み や すい 表 景 GRCCCCCCCCCKCCCCLCCCLLUCCUCCLLLLLLLUUCCLLLLLCCCCCCLD 


背景 に 画像 を 使う 場合 、 画 像 に 合わ せ て 文字 の 色 も 変更 する こと が あり ます (D.56 参照 )。 し か し 、 背 
景 画像 の 表示 に 時 間 が か か っ た り 、 ユ ー ザ ー が 画像 を 表示 し な いよ う 設 定 し て いる と き な ど に 、 指 定 し た 
色 に よっ て は 文字 が 読め な いこ と も あり ます 。 こ うし た 状況 を 考え て 、 同 時 に background-color プロ バ 
ティ で 文字 が 読み や すい 背景 色 を 設定 し て お いた ほう が よい で し ょ う 。 


POORKXKXXA) OCTYYKKRNRRKRRRRRRRRRRARKIRXKKKK ス スミ ミミ ミミ ミミ ミミ ミミ ミ メメ メス メメ ミミ スミ ミ ま 】 


背景 画像 を 指定 する HTML タグ を CSS に 改め る EEED COCCCKCCCUCCCCCCCLLK DOC 


HTML タグ で 背景 画像 の 貼り 込み を 指定 する に は 、 次 の よう に 背景 画像 を 指定 で きる タグ の 





background 属性 を 利用 し ます 。 
<body backqround=" 友 "> </body> ペー ジ 全 体 の 背景 画像 
<table background=" 娘 ">ー</table> テー ブル の 痛 景 画像 
< background=" 衣 "テー</ の > セル の 背景 画像 (ツーーtr、th、td) 


文 一 画像 ファ イル の URL 


<body> タグ の background 属性 は Deprecated (廃止 予定 と され て お り 、 ま た テー ブル 関係 の 背 
景 画像 は HTML4.01 で は 定義 され て いま せん 。 背 景 画像 の 指定 に は な る べく スタ イル シー ト を 使用 する 
よう に し まし ょ う 。 ま た 、 ス タイ ル シ ー ト を 使え ば 上 記 の タグ に 限ら ず す べ て の 要素 に 背景 画像 を 指定 す 
る こと が で きま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 


body { backqround-image: 廊 ペー ジ 全 体 の 背景 画像 
table {backqround-image: 娘 } テー ブル の 背景 画像 
【】 { backqround-image:  } セル の 背景 画像 (ツー 一 tr、th、td) 


太一 画像 ファ イル の URL 


CCLKCKLLLLLLKEILKERRLIRLRARRRRRRRRAARRRRRRRNALNSAMKLNALYSRKKKKK メ ミミ メメ メド ドミ メ ミミ ます 】 








1 1 三 ]】 王寺]】 IE6 ドリ 3 ドド いし 字 4 ド に ルコ 
ut(URL) O O 〇 O O (9) O O 
none @⑨) O 〇 O 〇 O O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
参照 背景 画像 の 繰り 返し 方 法 を 指定 し た い ・…・・……・ p.144 背景 画像 の 位置 を 指定 し た い ……・…・……… p.150 
に 5 背景 画像 を 固定 し た い …… バ ーー p.147 背景 を 一 括 し て 指定 し た い …… ド ーー p.157 
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background-repeat: 文 









支 *eeee キ ー ワ ー ド 





背景 画像 の 繰り 返し 方 法 を 指定 し ます 。 

育 景 画像 を 設定 し た 場合 、 通 常 は 画像 が タイ ル 状 に 敷き 詰め られ て 表示 され ます が 、 
background-repeat プロ バテ ィ で は 背景 画像 を 敷き 詰め る か どう か 、 敷 き 詰め る 場合 に は どの 
よう に 敷き 詰め る の か を 指定 で きる よう に な り ま す 。 

値 に は 以下 の キー ワー ド が あり ます 。 


repeat 画面 いっ ぱい に 敷き 詰め て 表示 (デフ ォ ル ト ) 
repeat-x 横 方 向 に の み 繰 り 返し て 表示 
repeat-y 縦 方 向 に の み 繰り 返し て 表示 
no-repeat 繰り 返 ぐ すず に 、1 点 だ け 表 示 


お 気 に 入 0⑯ ウール ⑪D へ ルプ ⑪ 


@*・ の 回 回 の Pem "の "mog 


イル 編 祥 ) 表示 お 気 に 入 D⑯ ウ - ル CD AM プ ⑪ 


@s の 回 還 人 の の 時 ztuo 





4 repeat 


peat-y - Microsoft Internet Explorer 


カイル 編集) 表示 ⑰ お 気 に 和 9⑯ ツー- ル D AM プ ⑱ 


GOR・ 〇 の 回 回 の Pe "po" 


アル) 統 集 D 表示 お 気に入り ウツ - ル D へ ML プ ⑪ 


@G- の 回 回 の お wm  「 ウ "ztoo 





人 人 repeat-V 全 no-repeat 
p 


144 背景 画像 の 繰り 返し 方 法 を 指定 し た い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<html><head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 背景 画像 の 繰り 返し 方 法 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { 
background-image: url("cat2.qif"): 
backqround-repeat repeat-V: 
backqround-color: #ffffcc 


h1 { 
pOsition: relative: 
left: 140px 


div 人 { 
position: absolute: 
left: 140px: 
width: 500px: 
padding: 20px: 
font-size: 12pt: 
iine-height: 2em 

} 

ーー> 

</style> 

</head> 

<bodV> 

<h1> スタ イル シー ト と は </h1> 

<div> 

Web ペー ジ を 記述 する HTML は 、…… (中 略 ) …… スタ イル シー ト の 概念 で す 。 

</ divV> 

</bodV> 

</htm> 
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アイ ル (上 太 集 5 表示 お 気 に 入 0⑯ ツー ル D へ NM プ GP 


@R の の 6 の mm 誠 pmcp 二 の の 8・ 避 回 





スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTM_ は 、 文書 の 論理 8 な 構造 を 示す 言 話 で 
す 。 た と えば ぼ 、 見 出し が あり 、 本 文 の 中 に 自 誠 や リス ト が あり …… と い 
っ た よう (に 、 文書 が どの よう な 要 径 で 構成 され て いる の か 、 また ある 
特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を . コ 
ンピュータ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 する た 
の の 言語 で は あり ませ ん 。 し か 実際は 、 Web の 発展 に と も な い 、 色 
や フォ ント サイ ズ の 指定 、 レイ アウ ト の た め の テ ー ブ ル の 利用 な ど 、 文 
書 の 体裁 つまり 見 栄え まで も 定義 する よう に お っ て いき まし た 。 VGC 
で (3 この 状況 を 改め る た め 、 柚 造 に 聞 す る 指定 と 体 に 関わ る 指定 
と を 分 離さ せ 、 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 
法 を 導入 し よう と 考え る よう に な り ま し た 。 こう し た 姿 勧 の も と に 生み 出 
され た の が スタ イル シー ト の 概念 で す 。 


の イター ネッ ト 








Q 
スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTM_ は 、 文書 の 論理 6 な 構造 を 示す 言語 で す 。 た と 
えば . 見 HH し が あり 本文 の 中 に 自 除 や リス ト が あり …… と いっ た よう に 文 
書 が どの よう な 要 径 で 構成 され て いる の か 、 また ある 特定 の 部 分 が 文書 全 
体 の 中 で どの よう な 意味 を も っ て いる の か を 、 コン ピュ ー タ に 知ら せる た め 
の 言語 な の で す 。 表現 方 法 を 指定 する た め の 言語 で は あり ませ ん 。 し か レ し 
実 呆 は 、 Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レイ アウ ト の た 
め の テ ー プ ル の 利用 な ど 、 文書 の 体 哉 つま り 見 栄え まで も 定義 する よう に 
な っ て いき まし た 。 W3C で は この 状況 を 改め る た め 、 構造 に 関す る 指定 と 価 
裁 に 関わ る 指定 と を 分 離さ せ 、 HTML の 村 能 で は な い 体裁 の 制御 に つい て 
は 別 の 方 法 を 男 入 し よう と 考え る よう に な り ま し た 。 こう し た 姿 鈴 の も と に 生 
み 出 され た の が スタ イル シー ト の 概念 で す 。 











1 ゴゴ 】 1 ミ 】 NN4.7 N6.2 


repeat ( 








OI( 


repeat-x 








repeat-V 


OIOI( 





no-repeat O 〇 O ) O 〇 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


内 背景 画像 を 指定 し た い 
背景 画像 の 位置 を 指定 し た い …………・…………… p.150 


146 背景 画像 の 繰り 返し 方 法 を 指定 し た い 

















育 景 画像 を 固定 し た い 


backqground-attachment: 文 





太 ssccs キ ー ワ ー ド 


背景 画像 を スク ロー ル に 応じ て 移動 させ る か 、 固 定 さ せる か を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 

fixed 背景 を 固定 

scroll スク ロー ル に 応じ て 背景 を 移動 (デフ ォ ル ト ) 


GS 上 DSI 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 背景 画像 を 固定 し た い </title> 
<style type="text/css"> 
に 
body { 
background-image: url("4birds.jpg"): 
background-attachment: fixed: 
backqround-color: #Tfffff 


} 

p { 
color: f3366: 
font-size: Iarde: 
white-space: nOWraDp 

} 
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</style> 

</head> 

<body> 

<P> 
background-attachment: fixed を 指定 する と 、 ブ ラウ ザ の 画面 を 上 下 左右 の いずれ に スク 
ー ル し て も 背景 画像 は 最初 に 表示 され た 状態 の まま 動か な く な り ま す 。 

</p> 

</body> 

</html> 





























た 1 Microsoft jnternet Explor 
イル) 引 ) 表示 お気 に 入 D⑯ ウー- ル D へ 2 


OR の 回 引 6 の we 率 awo 仙 ケ の の 折 ・ 入 回 ・』 














ド 背景 画 人 を 同定 し た 生 取 


遇 1 
NI | イル 業 ) 表示 ⑰ 栓 条 SO ウッ プ Q フッ クマ ャ ー ク 2220D へ ルプ 
(人 し あま 9 Oo ここ な っ な ん ん Au コ ] 回 S6o 
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人 スクロール し て も 背景 は 動き まま せん 
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背景 画像 を 固定 する HTML タグ を CSS に 改め る RCECCCCCCCCCCCCCCCCLCEPPTYPPCYYYYP 


HTML タグ で 背景 画像 の 固定 を 指定 する に は 、 次 の よう に <body background> の bgproperties 属 
性 で fixed を 指定 し ます 。 
<body backqround=" 太 " bgproperties="fixed"> --</body> ( 文 一 画像 ファ イル の URL) 


HTML タグ の bgproperties 属性 は Internet Explorer の 独自 拡張 の た め Netscape (Navigator) で は 
無視 され ます が 、 ス タイ ル シ ー ト で の 指定 は Netscape 6 で も 有効 に な り ま す 。 同 様 の 効果 を スタ イル シ 
ー ト で 表現 する と 以下 の よう に な り ま す 。 

body { backqround-image: 娘 : background-attachment: fixed } ( 文 一 画像 ファ イル の URL) 


PCOYYITKERIEKLKKILIRRKLLKLLRIKRRRRRRARERRRALLLARYRRKREKKKKRRKK タ KK スス ミミ ミミ ミミ ミミ ミミ ミミ ミオ 】 








1】 | 王 】 IE5.5 1 NN4 ドド C 4 ば に ルコ 
fixed O O O O メ メ 9 
scroll O O O O も 3 ※ 〇 O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
聞か 昔 男 像 を 指定 し た い …ーーーー ド ーー ドー p.140 背景 を 一 括 し て 指定 し じたい p157 
2 ア 主 画 像 の 位置 を 指定 し た い -………ーーー…… p.150 
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BACKGROUND 
背景 画像 の 位置 を 指定 し た い 


background-position: 文 
background-position: 文 文 





た ww サイ ズ を 表す 数 値 + 単位 
バー セン ト を 表す 数 値 +% 
キー ワー ド 






背景 画像 の 表示 位置 を 指定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 


サイ ズ を 表す 数 値 十 単 位 

ボッ クス 領域 の 左上 を 基点 と し 、 水 平方 向 の 位置 ( 左 か ら の 距離 ) と 垂直 方 向 の 位置 (上 か ら 
の 距離 ) を 半角 スペ ー ス で 区 切っ て 指定 し ます 。 た と えば 、30px 40px と 指定 し た 場合 は パ デ ィ 
ング の 左 か ら 30 ピク セル 、 上 か ら 40 ピク セル の 位置 に 画像 の 左上 を 揃え る こと に な り ま す 。 値 
を 1 つ だ け 指 定 し た 場合 は 水平 方 向 の 位置 を 指定 し た こと に な り 、 垂 直方 向 の 位置 は 「509%%」 に 
設定 され ます 。 値 に は 負 の 数 値 も 指定 する こと が で きま す 。 





人 background-position: 30px 40px 人 background-position: 30px 


パー セン ト を 表す 数 値 +% 

画像 の 位置 を ボッ クス 領域 の 幅 あ る い は 高 さ に 対す る 割合 で 指定 し ます 。 

ボッ クス 領域 の 左上 を 基点 と し 、 水 平方 向 の 位置 ( 左 か ら の 距離 ) と 垂直 方 向 の 位置 (上 か ら 
の 距離 ) を 半角 スペ ー ス で 区 切っ て 指定 する 点 は サイ ズ に よる 指定 と 同じ で す が 、 値 の 解釈 が 異 
な り ま す 。 

パー セン ト で 指定 する と 、 ボ ックス 領域 の 位置 の 割合 と 画像 の 位置 の 割合 が 揃い ます 。 た と え 
ば 、0%% 096 と 指定 し た 場合 は バディ ング の 左上 と 画像 の 左上 が 揃い 、149%6 84% と 指定 し た 場 
合 は パ デ ィ ン グ の 左 か ら 149%% 上 か ら 84% の 位置 と 画像 の 左 か ら 149% 上 か ら 84% の 位置 が 揃 


150 背景 画像 の 位置 を 指定 し た い 


いま す 。 同様 に 100% 100% と 指定 し た 場合 に は バディ ング の 右 下 と 画像 の 右 下 が 揃う こと に 
な り ま す 。 値 を 1 つ だ け 指定 し た 場合 は 水平 方 向 の 位置 を 指定 し た こと に な り 、 垂 直方 向 の 位置 
は 「50%」 に 設定 され ます 。 値 に は 負 の 数 値 も 指定 する こと が で きま す 。 





人 background-position: 0% 0% 
background-position: 100% 100% 


人 background-position: 14% 84% 


キー ワー ド 
top 上 端 
center 中 央 
bottom 下端 
left 左端 
right 右端 


垂直 方 向 の 位置 を 指定 する 場合 は top、center、bottom、 水 平方 向 を 指定 する 場合 は left、 
center、right を 任意 の 順番 で 、 半 角 ス ペー ス で 区 切っ て 指定 し ます 。 値 を 1 つ だ け 設 定 し た 場合 
は 、 も う 一 方 は center に 設定 され ます 。 


数 値 に よる 指定 と パー セン ト に よる 指定 と は 組み 合わ せ て 使用 する こと が で きま す 。 し か し キ 
ー ワ ー ド を 数 値 に よる 指定 や パー セン ト に よる 指定 と 組み 合わ せ て 使用 する こと は で きま せん の 
で 注意 し て くだ さい 。 

な お 、 背 景 画像 を 1 点 だ け 指 定 し た 位置 に 表示 させ る に は 、 同 時 に background-repeat 属性 
で no-repeat を 指定 し て くだ さい 。 そ れ 以 外 の 場合 は 、 指 定 し た 位置 を 基点 に 繰り 返し 敷き 詰 
られ ます 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 背景 画像 の 位置 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { 
background-image: url("catband.jpg"): 
background-repeat: no-repeat: 
background-position: 100% 100% 


div 人 { 
width: 650px: 
padding: 20px: 
font-size: 12pt: 
line-height: 1.5em: 


ー テ > 
</style> 

</head> 

<bodV> 

<h1> スタ イル シー ト と は </h1> 

<diV> 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を 示す 言語 で す 。 た と えば 、 見 出し が 
あり sn (中 略 ) …… こう し た 姿勢 の も と に 生み 出さ れ た の が スタ イル シー ト の 概念 で 
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当 疹 上 画 衣 の 位置 を 指定 し た Microsoft 
イル 圧入 6) 表示 お気 に 入 D⑯ ウー ル CD へ 4 プ 0⑪ 


@* の 回 回 の の m 到 mo の zo の ら - 久 四 ・ 局 
スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTM _ は 、 文書 の 語 理 9 な 構造 を 示す 言語 で す . た と えば 、 見 出し が 
あり 本 文 の 中 に 段 政 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう な 要素 で 構成 され 
て いる の か 、 また ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を . コ 
ンピュータ に 知ら せる た め の 言 語 な の で す 。 表現 方 法 を 指定 する た め の 言語 で は あり ませ 
ん . し か し 実際 は 、 Web の 発展 に と も ね い 、 色 や フォ ント サイ ズ の 指定 、 レイ アウ ト の た め の テ 
ー ブ ル の 利用 な ど 、 文書 の 体裁 、 つま り 見 栄え まで も 定義 せる よう に な っ て いき まし た 。 WGC 
で は この 状況 を 改め る た め 、 構造 に 関す る 指定 と 体 蒸 に 関わ る 指定 と を 分 釣 さ せ 
機能 で は な い 体裁 の 制御 に つい て は 別 の 方 法 を 間 入 し よう と 考え る よう に な り ま し た 

た 姿勢 の も と に 生み 出さ れ た の が スタ イル シー ト の 概念 で す 。 








スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTM_ は 、 文書 の 請 理 877 ぉ 構造 を 示す 言語 で す . た と えば 、 見 出し が あり . 
本 文 の 中 に 段 了 沙 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう 7 ぉ 要素 で 構成 され て いる の 
か . また ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を 、 コン ピュ ー タ に 知 
ら せ る た め の 言 語 な の で す 。 表現 方 法 を 指定 する た め の 言 語 で は あり ませ ん 。 し か し 実際 は 、 Web 
の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レイ アウ ト の た の の テー ブル の 利用 な ど 、 文書 の 
体裁 つま り 見 栄え まで も 定義 せ する よう に な っ て いき まし た 。 WC で は この 状況 を 改め る た め 、 構造 
に 関す る 指定 と 体 苦 に 関わ る 指定 と を 分 離さ せ 、 HTM の 機能 で は な い 体 裁 の 制御 に つい て は 別 
の 方 法 を 導入 し よう と 考え る よう に な り ま し た こう し た 姿勢 の も と に 生み 出さ れ た の が 

シー ト の 概念 で す 。 

















1】 1 IE5.5 1 コカ NN4 NN4.7 が (に ルス 
サイ ズ り B 了 メ b3 〇 O 
パー セン ト 〇 思 9 り メ ※ 記 
キー ワー ド あ に 9 ) メ X O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


画像 指定 し た い 
秒間 時 画像 の 繰返し 方 法 を 指定 し た い … 





140 背景 画像 の 位置 を 垂直 ・ 水 平方 向 別に 指定 し た い ・・D. 
144 背景 を 一 括 し て 指定 し た い 9 
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(いけ いり |) 


TTP PT 











background-position-x: 文 水平 方 向 
backqground-position-V: 文 垂直 方 向 
文 *ees サ イズ を 表す 数 値 + 単位 

パー セン ト を 表す 数 値 +% 


キー ワー ド 


背景 画像 の 表示 位置 を 水平 方 向 と 垂直 方 向 で 個別 に 指定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単位 
ボッ クス 領域 の 左上 を 基点 と し 、 水 平方 向 の 位置 ( 左 か ら の 距離 ) を background-position- 
X で 、 垂 直方 向 の 位置 (上 か ら の 距離 ) を background-position-y で 、 そ れ ぞ れ 指 定 し ます 。 


パー セン ト を 表す 数 値 十 % 

ボッ クス 領域 の 幅 あ る い は 高 さ に 対す る 割合 で 指定 し ます 。 

ボッ クス 領域 の 左上 を 基点 と し 、 水 平方 向 の 位置 ( 左 か ら の 距離 ) を background-position- 
X で 、 垂 直方 向 の 位置 (上 か ら の 距離 ) を background-position-y で 、 そ れ ぞ れ 指 定 する 点 は 
サイ ズ に よる 指定 と 同じ で す が 、 値 の 解釈 が 異な り ます 。 

パー セン ト で 指定 する と 、 ボ ックス 領域 の 幅 あ る い は 高 さ の 位置 の 割合 と 、 画 像 の 位置 の 割合 
が 揃い ます 。 た と えば 、0% と 指定 し た 場合 に は 画像 の 左上 と パ デ ィ ン グ の 左上 が 揃い 、 
background-position-x: 149%6 と 指定 し た 場合 は バディ ング の 左 か ら 14% と 画像 の 左 か ら 
14% の 位置 が 揃い 、background-position-y: 849% と 指定 し た 場合 は パ バディ ング の 上 か ら 
84%6 と 画像 の 上 か ら 849%% の 位置 が 揃い ます 。 同 様 に 1009%6 と 指定 し た 場合 に は 、 パ ディ ング 
の 右端 ある い は 下端 と 画像 の 右端 ある い は 左端 が 揃う こと に な り ま す 。 


キー ワー ド 
top 上 端 
center 中 央 
bottom 下端 
left 左端 
right 右端 


水平 方 向 の 位置 を 指定 する 場合 は left、center、right を background-position-x に 対し て 
指定 し ます 。 


背景 画像 の 位置 を 垂直 ・ 水 平方 向 別に 指定 し た い 


垂直 方 向 の 位置 を 指定 する 場合 は top、center、bottom を background-position-y に 対し 
て 指定 し ます 。 


Internet Explorer が 独自 に 拡張 し た プロ パテ ィ の た め 、Netscape で は 対応 し て いま せん の 
で 注意 し て くだ さい 。 

な お 、 背 景 画像 を 1 点 だ け 指 定 し た 位置 に 表示 させ る に は 、 同 時 に background-repeat 属性 
で no-repeat を 指定 し て くだ さい 。 そ れ 以 外 の 場合 は 、 指 定 し た 位置 を 基点 に 繰り 返し 敷き 詰 
られ ます 。 


NN 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 背景 画像 の 位置 を 垂直 ・ 水 平方 向 別に 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { 

backqround-image: url("cat2.qif"): 

backqround-repeat: repeat-V: 

backqround-position-x: 570px: 

background-color: 針 fffcc 


} 

div { 
background-image: url("cat1.qif"): 
backqround-repeat: repeat-x: 
backqround-position-y: 100%: 
width: 500px: 
padding: 20px 20px 60px: 
font-size: 10pt 
Hine-height: 2em 

} 

ーー テ 

</stvle> 

</head> 

<body> 
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<diV> 

Web ペー ジ を 記述 する HTML は 、…… (中 略 ) …… スタ イル シー ト の 概念 で す 。 
</diV> 

</body> 

</html> 














画像 の 位置 を 先 直 ・ 水平 方向 
I ル CE) 編 祥 CE) 表示 お 気に入り ウーAD へ ルプ ブ ⑪ 


の 回 還 @6 の we 実 pm9 寺 ケ 7 の らら - 清 回 


Web ペ ー ジ を 謗 する HTML は 、 文書 の 縛 理 的 な 構造 を 示す 言語 で す 。 た と えば 、 見 
出し か あり 、 本 文 の 中 に こ 絵 落 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう な 本 
素 で 構成 され て いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 専 味 を 
も っ て いる の か を 、 コン ピュ ー タ に 知ら せる た め の 言 語 な の で す 。 表現 方 法 を 指定 する 
た め の 言 語 で は あり ませ ん 。 し か し 夷 史 は 、 Web の 発 司 こと も な い 、 色 や フォ ント サイ 
ズ の 答 定 、 レ イア ウト の た め の テ ー ブ ル の 利用 な ど 、 文書 の 体 其 、 つ まり 見 室 え まで 
も 定着 する よう に な っ て いき まし た 。 W3C で は この 状況 を 改め る た め 、 精 適 に 関す る 指 
定 と 体 務 に 関 わる 打 定 と を 分 離さ せ 、HTML の 種 能 で は な い 体 項 の 制 析 に つい て は 
の 方 法 を 導入 し よう と 甘え る よう に な り ま し た 。 こう し た 姿勢 の も と に 生み 出さ れ た の 
が スタ イル シー ト の 覆 信 で す 。 














店 ・ 水 平方 向 別に 指定 し た 










ピ 計 義 に せる た め の 言語 な の で す 。 表 更 方 法 を 指定 する た め の 言語 で は あり ませ ん 。 
NO b の 発 馬 に と も な い 、 双 や フォ ント サイ ズ の 描 定 、 レ イア ウト の た め の テ ー ブ 
書 の 住 落 、 つ まり 見 倫 え まで も 定義 する よう に な っ て いき まし た 。 WSC で は 
た め 、 桶 半 に 図 する 指定 と ( 革 に 関わ る 指定 と を 分 療 さ せ 、HTML の 禁 人 
着 豆 こつ いて は 方法 を 導入 し よう と きえ る よう に な り ま し た 。 こう し た 次 
























1 1 主計 】 1 コ NN4 NN4.7 が に ル ] 
サイ ズ O に 3 3 X 
居 こ セン ジ ド O C O に 3 3 es 
キー ワー ド O O O 8 3 ※ ※ 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
・D.140 背景 画像 の 位置 を 指定 し た い …………・・…… ーー p.150 








画像 を 指定 し た い 
背 景 画像 の 線 り 返し 方 法 を 指定 し た い 


背景 画像 の 位置 を 垂直 ・ 水 平方 向 別に 指定 し た い 


p.144 


79 いり リリ 








background: 文 巡 全 人 へ 副 









大 weeecbackground-color の 値 (背景 色 ) 
補 weeebackground-image の 値 (背景 画像) 

全 …ebackground-repeat の 値 (背景 画像 の 繰り 返し ) 

へ webackground-attachment の 値 (背景 画像 の スク ロー ル ) 
[essesbackground-position の 値 (背景 画像 の 位置 ) 





ョ ッッ sar っ ラー ーー) や ーー 


背景 に 関す る 各種 指定 を 一 括 し て 設定 し ます 。background-color ( 色 )、background- 
image (画像 )、background-repeat (繰り 返し )、background-attachment (スク ロー ル )、 
background-position の 値 (位置 ) の うち 必要 な 値 を 任意 の 順番 で 並べ 、 半 角 ス ペー ス で 区 切 
っ て 指定 し ます 。 省略 され た 値 に つい て は デフ ォ ル ト の 設定 が 適用 され ます 。 


Rm 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 背景 を 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { background: 針 fcc99 url("cat2.gif") fixed repeat-y } 
div 人 { 
position: absolute: 
top: 20px: 
left:140px: 
width: 500px: 
padding: 20px: 





font-size: 12pt: 





背景 を 一 括 し て 指定 し た い 157 


凍 可 











line-height: 2em: 
background: #ffffcc url("bg1.qif") repeat-y right 


p { 
text-align:center: 
font-weiqht: bold: 
color: navV: 
background: #ffcccc url("bg2.qif") 
} 
ーー テ > 
</style> 
</head> 


<body> 

<diV> 

<p> スタ イル シー ト と は </p> 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を 示す 言語 で す 。 た と えば 、 見 出し が 
あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの よう な 要素 で 構成 さ 
れ て いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を 、 
コン ピュ ー タ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 する た め の 言語 で は あり ませ 
ん 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レ イア ウト の た 
め の テ ー ブ ル の 利用 な ど 、 文 書 の 体 哉 、 つ まり 見 栄え まで も 定義 むる よう に な っ て いき まし 
た 。W3C で は この 状況 を 改め る た め 、 構 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 
HTML の 機能 で は な い 体裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り ま し 
た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の が スタ イル シー ト の 概念 で す 。 

</div> 

</bodV> 


</html> 








スタ イル シー ト と は 


Wsb ペ ー ジ を 記述 する HTM_ は 、 文書 の 講 理 8 構造 を 示す 言語 で 
す 。 た と えば 、 見 出し が あり . 本 文 の 中 に 段 座 や リス ト が あり ・ い 
っ た よう に 、 文書 が どの よう な 要 径 で 構成 され て いる の か 、 また ある 
特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て いる の か を 、 コ 
ンピュータ に 知ら せる た め の 言語 な の で す 。 表現 方 法 を 指定 する た 
め の の 言語 で は あり ませ ん 。 し か いし 実際 は 、 Web の 発展 に と も な い 、 双 
や フォ ント サイ ズ の 指定 、 レイ アウ ト の た の め の テ ー ブ ル の 利用 ね ど 、 文 
書 の 体 苦 . つま り 見 栄え まで も 定義 する よう に な っ て いき まし た WGG 
で は この 状況 を 改め る た め 、 構造 に 関す る 指定 と 体 基 に 関わ る 指定 
と を 分 離さ せ 、 HTM_ の 機能 で は な い 体 哉 の 制御 に つい て は 別 の 方 
法 を 導入 し よう と 老 え る よう に な り ま し た 。 こう し た 姿勢 の も と に 生み 出 
され た の が スタ イル シー ト の 概念 で す 。 











| Ge/ ン や h> om ん ook/pc/ ル es や ec へ 07 eml | 回 


スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTML は 、 文書 の 請 理 97 構造 を 示す 言 話 で す 。 た と 
えば 、 見 出し が あり 、 本 文 の 中 に 膨 守 や リス ト が あり …… と いっ た よう に 文 
書 が どの よう な 要 坪 で 構成 され て いる の か 、 また ある 特定 の 部 分 が 文書 全 
体 の 中 で どの よう な 意味 を も っ て いる の か を 、 コ ンピュータ に 知ら せる た め 

の 言語 な の で す 。 表現 方 法 を 指定 する た め の 言語 で は あり ませ ん 。 し か し 

実際 は 、 Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レイ アウ ト の た 
の の テー ブル の 利用 な ど 、 文書 の 体 城 . つま り 見 栄え まで も 定義 する よう に 
な っ て いき まし た 。 WGC で は この 状況 を 改め る た め 、 構造 に 関す る 指定 と 体 
戴 に 関わ る 指定 と を 分 離さ せ 、 HTMA の 村 能 で は な い 体 裁 の 制御 に つい て 

は 別 の 方 法 を 導入 し よう と 老 え る よう に な り まし た こう し た 雇 勢 の も と に 生 

み 出 され た の が スタ イル シー ト の 概念 で す 、 











1 ゴゴ 3 1 ミミ 1 王寺 1 ミカ NN4 


共通 1 の) に か 過 旬 ! (うけ *1 
*1 : positon と attachment に は 対応 し て いま せん 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 











背景 色 を 指定 し た い ……・ ・p.136 背景 画像 を 固定 し た い 
参照 背景 画像 を 指定 し た い ・p.140 背景 画像 の 位置 を 指定 し た い ・ 
背景 画像 の 繰り 返し 方 法 を 指定 し た い …………ー…・ p.144 
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1 BOX 「 6 
マー ジン を 個別 に 指定 し た い 





margin-top: 太 上 側 
marqin-right: 文 右側 
margin-bottom: 文 下 側 
margin-left: 文 左側 
Xe* サ イズ を 表す 数 値 + 単 位 
パーセント を 表す 数 値 +% 


キー ワー ド 





ボッ クス の 枠 と 隣接 する ほか の ボッ クス 領域 と の 間隔 (マー ジン ) を 個別 に 指定 し ます 。 隣接 
する ボッ クス が な い 場 合 は 親 要 素 と の 間隔 が 設定 され ます 。 

margin-toOD は 上 側 、margin-right は 右側 、margin-bottom は 下 側 、margin-left は 左側 の 
マー ジン に それ ぞ れ 適用 され ます 。 

な お 、 上 下 に 隣接 する ブロ ッ ク レ ベル 要素 同士 の マー ジン は 、 相 殺さ れ て 大 きい ほう の マー ジ 
ン が 設定 され ます 。 ボ ックス の 概念 に つい て は p.45 を 参照 し て くだ さい 、。 








: margin-bottom 











内 容 領域 』 パ ディ ング 枠 線 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単 位 
数 値 に 単位 を つけ て マー ジン を 指定 し ます 。 マ イナ ス の 数 値 を 指定 する こと も で きま す 。 単位 


に つい て は p.46 を 参照 し こく だ さい 。 


160 。 パ マー ジン を 個別 に 指定 し た い 


パー セン ト を 表す 数 値 % 
親 要 素 の ボッ クス 領域 の 幅 に 対す る 割合 で マー ジン を 指定 し ます 。 左右 だ け で な く 、 上 下 の マ 
ー ジ ン に つい て も 幅 を 基準 に し ます 。 


キー ワー ド 
auto ブラ ウザ が 自動 的 に マー ジン を 設定 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> マー ジン を 個別 に 指定 し た い </ せ tle> 
<style type= "text/css"> 
<!-- 
body { margin: 0 } 
div { 
text-aliqn: center: 
paddinq: 10px: 
border: solid medium #339900: 
backqround-color: fff99 








} 

#sample1 { 
margin-top: 20pXi 
margin-bottom: 50px 

} 

#sample2 { 
margin-top: 20px: 
margin-right: 30%: 
margin-bottom: 50pxX: 
margin-left: 10% 

} 

ー テ > 

</style> 

</head> 


_ マー ジン を 個別 に 指定 し た い 





<body> 

<div id="sg/p/e7 "> 

マー ジン と は 枠 線 の 外側 に 設定 され る 余白 領域 で す <br> 
この 例 で は 個別 に マー ジン を 指定 し て いま す 。 

</div> 

<div id="sgp/e2"> 

マー ジン と は 枠 線 の 外側 に 設定 され る 余白 領域 で す 。<br> 
この 例 で は 個別 に マー ジン を 指定 し て いま す 。 

</div> 

</ body> 

</html> 
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162 “マー ジン を 個別 に 指定 し た い 





マー ジン を 指定 する HTML タグ を CSS に 改め る HECCCCCC エ エエ エエ メメ エメ メメ メメ メメ エメ KK メメ) 


HTML タグ で 実現 で きる マー ジン は 、 ペ ー ジ 全体 に 対す る マー ジン の み と な り ま す 。 次 の よう に 
<body> タグ に 属性 を 指定 し ます 。 
<body topmargin=" 友 "> ー</body> 
<body rightmargin=" 廊 "> 一 </body> 
<body bottommargin=" 友 "> 一 </body> 
<body leftmargin=" 衣 "> 一 </body> 


廊 一 一 マー ジン の 値 


HTML タグ の マー ジン 指定 は Internet Explorer の 独自 拡張 で 、Netscape (Navigator) は 対応 し て い 
ませ ん が 、 ス タイ ル シ ー ト な ら ば Netscape (Navigator) も 対応 し て いま す 。 
な お 、 スタ イル シー ト を 使え ば ペー ジ だ け で な く 、 すべ て の 要素 に マー ジン を 指定 する こと が で きま す 。 
同様 の 効果 を スタ イル シー ト で 表現 する と 一 例 と し て 以下 の よう に な り ま す 。 
body { marqin-top: 文 Dx } 
body { marqin-right: 娘 px } 
body { margin-bottom: 娘 Dx} 
body { margin-left: 文 Dx } 





文 一 マー ジン の 値 





POORERRRRIARRLAIKIIAKKRIXRKRRIRRRARRRRAARRRRAXX 








1 | 三 ] IE5.5 IE6 ド にし ドド C 守 4 が [に ルス 
サイ ズ O O O O O O O 
バー セン ト O O O O O O O 
auto O O O O O O O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


相補 人 、 マー ジン を 一括 し て 指定 し た い ……ーーーー… pi164 








164 










マー ジン を 一 括 し て 指定 し た い 


mardin: 文 上 下 左右 同じ 
mardin: 文 文 上 下 、 左右 
marqin: 友 文太 上 、 左右 、 下 


marqin: 文 文 文太 上 、 右 、 下 、 左 





文 es サイ ズ を 表す 数 値 + 単位 
パー セン ト を 表す 数 値 +% 
キー ワー ド 






ボッ クス の 枠 と 隣接 する ほか の ボッ クス 領域 と の 間隔 (マー ジン ) を 一 括 し て 指定 し ます 。 隣 
接する ボッ クス が な い 場合 は 親 要素 と の 間隔 が 設定 され ます 。 

値 が 1 つ だ け の と き は 上 下 左右 に 同じ マー ジン 幅 が 適用 され ます が 、2 4 個 の 値 を 半角 スペ 
ー ス で 区 切っ て 並べ る と 、 値 の 数 に よっ て 適用 され る マー ジン 幅 と 場所 の 組み 合わ せ が 変 わり ま 
す 。 

な お 、 上 下 に 隣接 する ブロ ッ ク レ ベル 要素 同士 の マー ジン は 、 相 殺さ ぐさ れ て 大 きい ほう の マー ジ 
ン が 設定 され ます 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単位 
数 値 に 単位 を つけ て マー ジン を 指定 し ます 。 マ イナ ス の 数 値 を 指定 する こと も で きま す 。 単位 
に つい て は p.46 を 参照 し て くだ さい 。 


パー セン ト を 表す 数 値 十 % 
親 要 素 の ボッ クス 領域 の 幅 に 対す る 割合 で マー ジン を 指定 し ます 。 左右 だ け で な く 、 上 下 の マ 
ー ジ ン に つい て も 幅 を 基準 に し ます 。 


キー ワー ド 
auto ブラ ウザ が 自動 的 に マー ジン を 設定 


マー ジン を 一 括 し て 指定 し た い 








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> マー ジン を 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { marqin: 0 } 
div { 
text-align: center: 
padding: 10px: 
border: solid medium #339900: 
backqround-color: #ffff99 
} 
# が Sg77/e7 { margin: 50px } 
# が Sp/e2 { margin: 20px 30px } 
# が 577p/e3 { margin: 20px Opx 10px 25% } 
ー> 
</style> 
</head> 
<body> 
<div id="sgp/e7"> 
マー ジン と は 枠 線 の 外側 に 設定 され る 余白 領域 で す <br> 
この 例 で は 一 括 し て マー ジン を 指定 し て いま す 。 
</div> 
<div id= "sp/e2"> 





</div> 
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1 イ 】 1 IE5.5 IE6 NN4.7 ド に ルオ 
サイ ズ O O O O O O 
パー セ シ ト O O O O O C 
auto O O O O O O 








※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


2 マー ジン を 個別 に 指定 し た い ……ーーーーーーー・ p.160 


166 マー ジン を 一 括 し て 指定 し た い 










うす NNMM0I 
パ デ ィ ン グ を 個別 に 指定 し た い 





padding-top: 太 上 側 
paddinqg-riqht: 文 右側 
padding-bottom: 文 下 側 
paddinqg-left: 文 左側 
Xe サイ ズ を 表す 数 値 単位 

バ パーセント を 表す 数 値 +% 


キー ワー ド 





ボッ クス の 内 容 領域 と 枠 と の 間 の 間隔 (バディ ング ) を 個別 に 指定 し ます 。 
padding-top は 上 側 、padding-right は 右側 、padding-bottom は 下 側 、paddinqg-left は 
左側 の パ バディ ング に それ ぞ れ 適用 され ます 。 














内 容 領域 


値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単 位 
数 値 に 単位 を つけ て パ デ ィ ン グ を 指定 し ます 。 単位 に つい て は p.46 を 参照 し こく だ さい 。 マー 
ジン と 違い 、 パ ディ ング に は マイ ナス を 指定 する こと は で きま せん 。 


パー セン ト を 表す 数 値 二 % 
親 要素 の ボッ クス 領域 の 幅 に 対す る 割合 で バディ ング を 指定 し ます 。 左右 だ け で な く 、 上 下 の 
パ デ ィ ン グ に つい て も 幅 を 基準 に し ます 。 
キー ワー ド 
auto ブラ ウザ が 自動 的 に バディ ング を 設定 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> パ デ ィ ン グ を 個別 に 指定 し た い </title> 

<style type="text/css"> 


body { margin: 0 } 

div { 
margin: 20px: 
border: solid medium #339900: 
backqround-color: #ffff99 





が 5g77p/e7 { 
padding-top: 20px: 
padding-bottom: 50px 
} 
が 5g77p/e2 { 
padding-top: 20px 
padding-right: 30%: 
padding-bottom: 50px: 
padding-left: 10% 
} 
ーー テニ 
</style> 
</head> 
<bodV> 
<div id="sg7p/e7"> パ ディ ング と は …… (中 略 ) …… いま す 。</div> 
<div id="sg7p/e2"> パ ディ ング と は …… (中 略 ) …… いま す 。</div> 
</bodV> 
</html> 
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E か ちと デジ ルオ): ほそ コト コミ t 
アイ ル ) 編集 E) 表示 W) お 気に入り Q@) 


GO 引 引 6 の mm 壇 





“クセ ル 、 下 に 50 ビ ピク セル の パ デ ィ ン グ が 設定 され て いま す 。 


ッ グ ど は ば 示 の 内 容 が 表示 され る 部 分 と 枠 線 と 
で ーー の 間 の 余白 領域 で す . この 例 で は 上 に 20 ビ クセ ル 
に 30%、 下 に 50 ビ クセ ル 、 左 に 10% の パ デ ィ ン グ が 設定 
され て いま す 。 





バディ ング と は 要素 の 内 容 が 表示 され る 部 分 と 枠 線 と の 間 の 余白 領域 で す . この 例 で は 上 に 20 


PCECCCLLCLELT 3 


る イラ ーネット 





ル 、 下 に 50 ビ クセ ル の パ バディ ング が 設定 され 


(ディ ング と は 要素 の 内 容 
の 余 日 領域 で す 。 の 何で EE c20 ビ の セル の 
堅 玉 に 50 ビ クセ ル 左 に 104 の パテ ディン グ が 設定 され て いま す . 





バ パ ディング と は 要素 の 内 容 が 表示 され る 部 分 と 枠 線 この 間 の 余白 領域 で す . この 例 で は 上 に 20 ビ クセ 




















「! 「】 [王寺] IE6 NN4 NN4.7 NE ル 】 
サイ ズ O O 加 O O O O 
バー セン ト O 〇 〇 O O O 〇 O 〇 
auto O O 〇 O 〇 O O O O 
※ 骨 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
バディ ング を 一 括 し て 指定 し た い ・ ーp.170 
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169 
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パ デ ィ ン グ を 一 括 し て 指定 し た い 





paddind: 太 上 下 左右 同じ 
padding: 文 文 上 下 、 左右 
padding: 文 文 文 上 、 左右 、 下 
padding: 文 文太 上 、 右 、 下 、 左 
大 *wees サ イズ を 表す 数 値 + 単位 

バー セン ト を 表す 数 値 +% 


キー ワー ド 






ボッ クス の 内 容 領域 と 枠 と の 間 の 間隔 ( パ バディ ング ) を 一 括 し て 指定 し ます 。 

値 が 1 つ だ け の と き は 上 下 左右 に 同じ バディ ング 幅 が 適用 され ます が 、2 4 個 の 値 を 半角 ス 
ペー ス で 区 切っ て 並べ る と 、 値 の 数 に よっ て 適用 され る パ デ ィ ン グ 幅 と 場所 の 組み 合わ せ が 変 わ 
り ま す 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 二 単位 
数 値 に 単位 を つけ て バディ ング を 指定 し ます 。 単位 に つい て は p.46 を 参照 し こく だ さい 。 マ ー 
ジン と 違い 、 パ ディ ング に は マイ ナス を 指定 する こと は で きま せん 。 


パー セン ト を 表す 数 値 二 % 
親 要素 の ボッ クス 領域 の 幅 に 対す る 割合 で バディ ング を 指定 し ます 。 左右 だ け で な く 、 上 下 の 
パ デ ィ ン グ に つい て も 幅 を 基準 に し ます 。 


キー ワー ド 
auto ブラ ウザ が 自動 的 に パ デ ィ ン グ を 設定 


バディ ング を 一 括 し て 指定 し た い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> パ デ ィ ン グ を 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { marqin: 0 } 
div { 
margin: 20px: 
border: solid medium #339900: 
backqround-color: #ffff99 





} 

# が Sg77/e7 { padding: 50px } 

が Sop/e2 { padding: 20px 30px } 

# が Sog77/e3 { padding: 20px Opx 10px 25% } 

ー> 

</style> 

</head> 

<bodV> 

<div id="sg7p/e7"> 

パ デ ィ ン グ と は 要素 の 内 容 が 表示 され る 部 分 と 枠 線 と の 間 の 余白 領域 で す 。 
この 例 で は 上 下 左右 に 50 ピク セル の パ デ ィ ン グ が 設定 され て いま す 。 
</div> 

<div id="sgp(e2"> 

ON デ ネ ジ グ 選 人 届 yw (中 略 ) …… いま す 。 

</div> 

<div id="sg7p(e3"> 

デイ ジ シダ と ど は sw (中 略 ) …… いま す 。 

</div> 

</bodV> 

</htm> 
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ョ バ 基 UC 半 定 し を - Mierosft mt. 抱 ] 各 際 
イル 本 本 6) 表示 ⑦ お 気 に 入 0⑩ ウー ル D ^" 
229| 


@ ゃ の 還る 























IE5.5 IE6 NN4 NN4.7 が に: ル 4 
サイ ズ O O O O O O O 
パー セン ト O O O O O 〇 O 〇 
auto 〇 O O O O O 〇 
※ 髄 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
パ デ ィ ン グ を 個別 に 指定 し た い ・…ーーーー… p.167 
バディ ング を 一括 し て 指定 し た い 








に けい リ 
枠 線 の 太 さ を 個別 に 指定 し た い 





border-top-width: 文 上 側 
border-right-width: 文 石 側 
border-bottom-width: 太 下 側 
border-left-width: 太 左側 
Xe* サ イズ を 表す 数 値 + 単位 


キー ワー ド 





ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 太 さ を 個別 に 指定 し ます 。 

border-top-width は 上 の 枠 線 に 、border-right-width は 右 の 枠 線 に 、borer-bottom- 
width は 下 の 枠 線 に 、border-left-width は 左 の 枠 線 に それ ぞ れ 適用 され ます 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 

な お 、Netscape Navigator 4.7 以前 で は 、 こ の border-width プロ バテ ィ を 省略 する と 、 
border-style な ど を 指定 し て も 枠 線 は 表示 され ませ ん 。 


サイ ズ を 表す 数 値 十 単 位 
数 値 に 単位 を つけ て 枠 線 の 太 さ を 指定 し ます 。 単位 に つい て は p.46 を 参照 し こく だ さい 。 
キー ワー ド 
thin 細い 線 
medium 中 くら い の 線 (デフ ォ ル ト ) 
thick 太い 線 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 枠 線 の 太 さ を 個別 に 指定 し た い </title> 

<style type="text/css"> 
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<!-- 

p { 
width: 70%: 
paddinqg: 10px: 
background-color: #ffff99 





} 

・S77//e7 { 
border-top-width: 0px: 
border-right-width: 50px: 
border-bottom-width: 0pxz 
border-left-width: 50px: 
border-style: solid: 
border-color: teal 

} 

・S077/e2 { 
border-top-width: 5mm: 
border-right-width: thin: 
border-bottom-width: medium: 
border-left-width: 50px 
border-style: solid: 
border-color: #ff6666 

} 

ー> 

</style> 

</head> 

<bodV> 


<D Class="sg77p/e7"> 

ボッ クス 領域 の 上 下 左右 の 枠 線 の 太 さ を 個別 に 指定 し て いま す 。 こ の 枠 線 は 、 上 下 が 0 ピ ク 
セル 、 左 右 が 50 ピク セル で す 。 

</P> 

<D Class="sg77p/e2"> 

ボッ クス 領域 の 上 下 左右 の 枠 線 の 太 さ を 個別 に 指定 し て いま す 。 こ の 枠 線 は 、 上 が 5mm、 
右 が thin、 下 が medium、 左 が 50 ピク セル で す 。 

</P> 

</body> 

</html> 
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良 視線 の 太 さ を 個 別に 指定 し た い - Microsoft Imternet Explorer 


アイ ル (上 編集 表示 お 気 に 和 0O⑯ ツー ル ⑪D へ M プ ⑪ 


@・ の 6 回 国人 @ の ws 天 pmO9 @ ち の の 作 腕 国 ・ 回 2 











ド 梓 線 の 大 さ を 個 別に 指定 し た い - Netscape 6 





























1 1 ヨガ 1 王 誠 】 1 コガ NN4 NN4.7 が に ルコ 
サイ ズ 還 り O O O O 
thin ) O 〇 O O O O 
medium り O り 〇 《Q O O 
thick り 〇 O ⑳) O 〇 1 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
参照 枠 線 の 太 さ を 一 括 し て 指定 し た い …*DP.176 枠 線 を 一 括 し て 指定 し た いい ドド p.195 
ザ 個別 の 枠 線 こ と に 一 括 し て 指定 し た い ・・ ・p.192 
枠 線 の 太 さ を 個 別に 指定 し た い 
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枠 線 の 太 さ を 一 括 し て 指定 し た い 





border-width: 文 上 下 左右 同じ 
border-width: 文 文 上 下 、 左右 
border-width: 文 文 文 上 、 左右 、 下 
border-width: 文 文 文太 上 、 右 、 下 、 左 
サイ ズ を 表す 数 値 + 単位 


キー ワー ド 






ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 太 さ を 一 括 し て 指定 し ます 。 

値 が 1 つ だ け の と き は 上 下 左 右 に 同じ 太 さ が 適用 され ます が 、2 4 個 の 値 を 半角 スペ ー ス で 
区 切っ て 並べ る と 、 値 の 数 に よっ て 適用 され る 枠 線 と 太 さ の 組み 合わ せ が 変 わり ます 。 

な お 、Netscape Navigator 4.7 以前 で は 、 こ の border-width プロ バテ ィ を 省略 する と 、 
border-style な ど を 指定 し て も 枠 線 は 表示 され ませ ん 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 


サイ ズ を 表す 数 値 十 単 位 
数 値 に 単位 を つけ て 枠 線 の 太 さ を 指定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 


キー ワー ド 
thin 細い 線 
medium 中 くら い の 線 (デフ ォ ル ト ) 
thick 太い 線 


枠 線 の 太 さ を 一 括 し て 指定 し た い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 枠 線 の 太 さ を 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
p { 
width: 70%: 
padding: 10px: 
backgqround-color: #ffff99 





} 
.S0/ カ D/e7 { 
border-width: medium: 
border-style: solid: 
border-color: teal 
} 
.S77D/e2 { 
border-width: 30px 3px: 
border-style: solid: 
border-color: #ff6666 
} 
ーー テ 
</style> 
</head> 
<bodV> 
<P class="sg7p/e7"> ボ ックス 領域 の …… (中 略 ) …… で す 。</PD> 
<P class="sg7p/e2"> ボッ クス 領域 の …… (中 略 ) …… で す 。</Pp> 
</body> 
</htm> 
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当 視 紀 の 太 さ を 一 括 し て 指定 し た い - Microsoft Internet Explorer 


イル 編集) 表示 ⑰ お 気に入り (⑩ ウー ル ①D へ ルプ ⑪ 


③・⑨ の - 国 国人 ぬ 人 es 丈 smA9 休 の @ 全 - ら 較 ・ 」 ht 





























1 1 ミコ IE5.5 1 ココ ドド [3 ド に ルオ 
サイ ズ O O き $ O り 〇 
thin O O O O O 
medium O O (@ CO O O 
thick O O ) の 4 O 





涼 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 






枠 線 の 太 さ を 個別 に 指定 し た い 


参 個別 の 枠 線 ご と に 一 括 し て 指定 し た い ・ 
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7 要 
枠 線 の 色 を 個別 に 指定 し た い 





border-top-colorx 文 上 側 
border-right-color: 文 右側 
border-bottom-color: 文 下 側 
border-left-color: 太 左側 
支 *eeesRGB 値 

キー ワー ド 


transparent (透明 ) 






ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 色 を 個別 に 指定 し ます 。 

border-top-color は 上 の 枠 線 に 、border-right-color は 右 の 枠 線 に 、borer-bottom-color 
は 下 の 枠 線 に 、border-left-color は 左 の 枠 線 に それ ぞ れ 適用 され ます 。 

色 は RGB 値 、 キ ー ワ ー ド 、transparent (透明 ) の いずれ か で 指定 し ます 。 transparent を 
指定 する と 、 枠 線 の 幅 は 確保 され た まま 透明 で 表示 され 、 背 景 の 色 が 透 遇 され る よう に な り ま す 。 
色 の 詳し い 指定 方 法 に つい て は p.47 を 参照 し こく だ さい 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 桁 線 の 色 を 個別 に 指定 し た い </title> 
<style type="text/css"> 
<!-- 
p { 
width: 709%: 
padding: 15Dx: 
border: soliid 10px: 
text-aliqn: center 
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.Sg77/e7 { 
border-top-color: red: 
border-right-color: yellow: 
border-bottom-color: qreen: 
border-left-color: blue 


} 

・Sg77p/e2 { 
border-top-color: tea し 
border-bottom-color: navy 

} 

ーー テ 

</style> 

</head> 

<body> 


<P Class="sg/7p/e7"> 

ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 個別 に 指定 し て いま す 。 
</P> 

<D Class="sg77p/e2"> 

ボッ クス 領域 の 上 下 左右 の 桁 線 の 色 を 個別 に 指定 し て いま す 。 
</Pp> 

</body> 

</html> 





貞 





当 要 康 の 色 を 個別 に 指定 し た い - Microsoft internet Explore 
アイ ル ⑤ 編集 5 し お 気 に 入 ⑯ ウツ - ル OD er に 





N 利 細 の 色 を 個別 に 指定 し た い - Netscape 6 
|。 カイル) 村 集 (5) 表示 V 検索 G) ジャ ンプ G) プッ 2 マー が ⑧) 娘 が D へ ルプ ⑪ 


| (の ohosehscom/book/pc/casox/ も ox07html 品田 


ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 個別 に 指定 し て いま す 。 
ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 個別 に 指定 し て いま す . 









































1 1 1 王 電 ] NN4 NN4.7 が に ル 4 
色 名 メ り O し 3 も 3 O 
シス テム カラ ー し 3 〇 O 〇 も 3 も 3 O 
transparent し 3 〇 〇 0 ※ O 
fgb X O O O メ ※ O 
打 rggbb し 3 〇 O O 〇 O 96 ※ O 
rgb(%,.%,%) に 3 の ) O 9 に 3 ※ 〇 
rgb(,) KA O O O X X O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
参 昭 枠 線 の 色 を 一 括 し て 指定 し た いい p.182 枠 線 を 一 括 し て 指定 し た い …p.195 
個別 の 枠 線 で と に 一 括 し て 指定 し た い ……・…・…・…・ p.192 
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枠 線 の 色 を 一 括 し て 指定 し た い 





border-color: 文 上 下 左右 同じ 
border-color: 文 文 上 下 、 左右 
border-color: 文 文太 上 、 左右 、 下 
border-color: 文 文 文 文 上 、 右 、 下 、 左 
丸 meessRGB 値 

キー ワー ド 


transparent (透明 ) 





ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 色 を 一 括 し て 指定 し ます 。 

値 が 1 つ だ け の と き は 上 下 左右 に 同じ 色 が 適用 され ます が 、2 4 個 の 値 を 半角 スペ ー ス で 区 
切っ て 並べ る と 、 値 の 数 に よっ て 適用 され る 枠 線 と 色 の 組み 合わ せ が 変 わり ます 。 

色 は RGB 値 、 キ ー ワ ー ド 、transparent (透明 ) の いずれ か で 指定 し ます 。 transparent を 
指定 する と 、 枠 線 の 幅 は 確保 され た まま 透明 で 表示 され 、 背 景 の 色 が 透過 され る よう に な り ま す 。 
色 の 詳し い 指定 方 法 に つい て は p.47 を 参照 し て くだ さい 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 枠 線 の 色 を 一 括 し て 指定 し た い </title> 
<stvle type="text/css"> 
<!-- 
p { 
width: 70%: 
paddinq: 15Dx: 
border: solid 10px: 
text-aliqgn: center 
} 
.S77/e7 { border-color: rgb(102,204,153) } 
.S077/e2 { border-color: aqua #00f #800080 } 
ーー テ 
</style> 
</head> 
<body> 
<P class="sg/7/e7"> 
ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 一 括 し て 指定 し て いま す 。 
</D> 
<PD Class="sg77D/e2"> 
ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 一 括 し て 指定 し て いま す 。 
</D> 
</bodV> 
</htm> 
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ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 一 括 し て 指定 し て いま す 。 


ボッ クス 領域 の 上 下 左右 の 梓 線 の 色 を 一 括 し て 指定 し て いま す . 


全 値 が 1 つの と き は 上 下 左右 に 同じ 色 が 、 値 が 3 つの と き は 左右 が 同じ 色 と な り ま す 














ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 一 括 し て 指定 し て いま す 。 


ボッ クス 領域 の 上 下 左右 の 枠 線 の 色 を 一 括 し て 指定 し て いま す .。 





全 値 が 1 つの と き は 上 下 左右 に 同じ 色 が 、 値 が 3 つの と き は 左右 が 同じ 色 と な り ま す 
































1】 1 1 三 】 1 コガ NN4 NN4.7 N6.2 

色 名 O O O O O O O 
シス テム カラ ー O O O O メ に 3 O 
transparent と 3 し し 3 ※ 96 ※ 〇 
gb O O O O O O O 
打 rggbb 〇 O O O O O O 〇 
rgb(%,%,%) O O O O O O O 
rb() O O O O O O O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 

参照 枠 線 の 色 を 一 括 し て 指定 し た い …":D.182 枠 線 を 一 括 し て 指定 し た い ……・………… p.195 

"個別 の 枠 線 ご と に 一 括 し て 指定 し た い ・ ……p.198 
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枠 線 の 種類 を 個別 に 指定 し た い 


border-top-style: 文 上 側 
border-right-stvle: 文 右側 
border-bottom-style: 文 下 側 
border-left-style: 太 左側 









文 *eecce キ ー ワ ー ド 





ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 種類 を 個別 に 指定 し ます 。 

border-top-style は 上 の 枠 線 に 、border-right-style は 右 の 枠 線 に 、border-bottom-style 
は 下 の 枠 線 に 、border-left-style は 左 の 枠 線 に それ ぞ れ 適用 され ます 。 

値 に は 以下 の キー ワー ド が あり ます (それ ぞ れ の 実例 は p.190 参照 )。 


none 枠 線 を 表示 し な い (デフ ォ ル ト ) 

hidden 枠 線 を 表示 し な い 

dotted 点線 

dashed 破線 

solid 実線 

double 二 重 線 

qroove 線 が へ こん だ よう に 見 える 枠 線 

rdqe 線 が 浮 ま 上 が っ た よう に 見 える 枠 線 

inset 線 よ り 内 側が へ こん だ よう に 見 える 枠 線 
outset 線 よ り 内 側が 浮き 上 が っ た よう に 見 える 枠 線 


border-style プロ バテ ィ を 省略 する と デフ ォ ル ト の none が 適用 され 、 枠 線 は 表示 され ませ 
ん 。 

また 、none と hidden は どちら も 枠 線 を 表示 せ ず 、 太 さも 0 に 指定 され る 点 で は 共通 し て いま 
す が 、 テ ー ブ ル の セル な どの 枠 線 と し て 重なり あっ た 場合 に は none は 他 の 値 を 優先 し 、hidden 
は 自分 の 値 を 優先 し ます (p.206 参照)。 
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人 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 枠 線 の 種類 を 個別 に 指定 し た い </title> 
<style type="text/css"> 
<!-- 
p { 
text-align: center: 





font-weight: bold: 

width: 70%: 

padding: 15px: 

border: 7px rgb(102,204,153): 
border-top-style: dotted: 
border-right-style: solid: 
border-bottom-style: dashed: 
border-left-style: double 





} 

ーー テ > 

</style> 

</head> 

<body> 

に コ D テ 

border-top-style: dotted<br> 
border-right-style: solid<br> 
border-bottom-style: dashed<br> 
border-left-style: double 
</Dp> 

< /| body> 

</html> 
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強 梓 紀 の 種類 を 個別 に 指定 し た い - Microsoft Internet Explorer 
イル) 編集) 表示 お気 に 入 D ツー ル ①D AM プ ⑪ 


@s- の 回 較 @ 


border-top-style- dotted 

border-right-style- solid 
border-bottom-style- dashed 

border-left-style- double 





。 アイ ル () 編集 E) 表示 (V 検索 ジャ ンプ ③ ブッ クマ ー2B) 22①D 人 ヘル 2⑪ 


Ore7 な ceonAorc ん csAorAoaphm 
PTTTTTTTTPTPFTFPPPPPPPPFFFFFFFFFFFFFFFFFFFFFP 
border-top-style- dotted 
border-right-style- solid 
border-bottom-style- dashed 
border-left-style- double 






































1 1 二 ] IE6 NN4 ドド し 和 4 に ルコ 
none O O O メ ※ O 
dotted ※ も 3 O O メ 3 O 
dashed メ ※ O O ※ に O 
solid O O O O に 3 ※ 9 
double O O O O メ に 3 O 
groove O O O O X 3 O 
ridge O O O O ※ も 3 O 
inset O O O O も 3 も 3 O 
outset ) O O O ※ も 3 O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
※ Macintosh 版 IE5 は dotted、dashed に も 対応 し て いま す 


際 枠 線 の 種類 を 一 括 し て 指定 し た い 
個別 の 枠 線 こ と に 一 括 し て 指定 し た い …・ 
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10 
枠 線 の 種類 を 一 括 し て 指定 し た い 


border-style: 文 上 下 左右 同じ 
border-stvle: 文 文 上 下 、 左右 
border-style: 文 文太 上 、 左右 、 下 


border-style: 文 文 文 文 上 、 右 、 下 、 左 









文 eecce キ ー ワ ー ド 





ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 種類 を 一 括 し て 指定 し ます 。 

値 が 1 つ だ け の と き は 上 下 左右 に 同じ 種類 が 適用 され ます が 、2 4 個 の 値 を 半角 スペ ー ス で 
区 切っ て 並べ る と 、 値 の 数 に よっ て 適用 され る 枠 線 と 種類 の 組み 合わ せ が 変 わり ます 。 値 に は 以 
下 の キ ー ワ ー ド が あり ます 。 


none 枠 線 を 表示 し な い (デフ ォ ル ト ) 

hidden 枠 線 を 表示 し な い 

dotted 点線 

dashed 破線 

solid 実線 

double 二 重 線 

qroove 線 が へ こん だ よう に 見 える 枠 線 

ridge 線 が 浮き 上 が っ た よう に 見 える 桁 線 

inset 線 よ り 内 側が へ こん だ よう に 見 える 枠 線 
outset 線 よ り 内 側が 浮き 上 が っ た よう に 見 える 枠 線 


border-style プロ パテ ィ を 省略 する と デフ ォ ル ト の none が 適用 され 、 枠 線 は 表示 され ませ 
ん 。 

また 、none と hidden は どちら も 枠 線 を 表示 せ ず 、 太 さも 0 に 指定 され る 点 で は 共通 し て いま 
す が 、 テ ー ブ ル の セル な どの 枠 線 と し て 重なり あっ た 場合 に は none は 他 の 値 を 優先 し 、hidden 
は 自分 の 値 を 優先 し ます (p.206 参照)。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 枠 線 の 種類 を 一 括 し て 指定 し た い </title> 
<stvle type="text/css"> 
= 
p { 
width: 70%: 
padding: 10px: 
border: 7px rgb(102,204,153): 
text-align: center: 
font-weight: bold 





} 

977p/e7 { border-style: none } 
p.sg77p/e2 {border-style: dotted } 
5g77p/e3 人 {border-style: dashed } 
sp/e4 {border-style: solid } 
se5 {border-style: double } 
sg77p/e6 {border-style: groove } 
.sg77p/e7 {border-style: ridge } 
sp/e8 {border-style: inset } 
p.sg77p/e9 {border-style: outset } 
sp/e70 {border-style: dotted double } 
ーー> 

</style> 

</head> 

<bodV> 

<D Class="sg77p/e7 ">border-style: none</P> 
<D class="sg7p/e2">border-style: dotted</D> 
<P class="sg/7p/e3">border-style: dashed</D> 
<D Class="sg77p/e4 ">border-style: solid</D> 
<P class= "sg77p/e5">border-style: double</D> 
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<P class="sg/7p/e6">border-style: groove</D> 

<P Class="sg/p/e7">border-style: ridge</P> 

<P Class="sg/7p/e8">border-style: inset</D> 

<P Class="sg/7p/e9">border-style: outset</D> 

<P class="sg/7p/e70">border-style: dotted double</D> 
</body> 

</html> 





ン 3 全 の 衝 環 を 一 技 し て 指定 し た い - Micresoft intermet E 


カイル) 編集 5 表示 ⑰ お 気 に 入 0(⑳ 9- ル D へ ルプ ⑪ 


の 回 の we 束 5moo 介 77 @ 





border-style- dotted 


OOCECEEYYYS で ] DOTEKKKXKSSKSRKEEEYEEEREEEEY 
PF ニー ニー ニー ニー ニニ ニニ ニニ ニー ニニ ニー ニニ ニニ ニー ニニ ニー ニー ニー ニニ ニー ニニ ニュ 


LU border-style: dashed 1 


セー ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ ニニ =d 


OSYYEIKYEYEYEYRYEYEEKSESESS 双 X1 


border-style- dotted double 


KK ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ さす 





ーーーー< シ ーー ーーー- 
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人 


ET] ep 避 





border-style- none 


border-style- dotted H 


mmーーーーーー ニ ーー ニー ニー ニー ニー ニー ニーー ニ ーー ニー ニ ーー ニー ニー ニー コ 


border-style- dashed 


Im ニニ ニー ニー ニー ニー ニー ニー ニー ニーー ニ ーー ニー ニー ニー ニー ニー デー 


border-style- solid 








border-style- double 


















































1 1 エキ 】 | 王 呈 】 IE6 NN NN4.7 ド に に ルス 

none O O O 9 O O 9 
dotted に 3 メ O O メ ペ O 
dashed ※ O メ ※ 〇 O 
solid 〇 O 〇 O 〇 O O 
double O O O O O あ 
qroove O 〇 (9 O O O 
ridge O O O O O O 
jnset O O O O O O 〇 O 
outset O O O O O O 〇 

※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 

※ Macintosh 版 IE5 は dotted、dashed に も 対応 し て いま す 

-…p.185 枠 線 を 一 括 し て 指定 し た い … パ tm p.195 








枠 線 の 種類 を 個別 に 指定 し た い 
個別 の 枠 線 こ と に 一 括 し て 指定 し た い …*P.192 
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1 
個別 の 枠 線 ご と に 一 括 し て 指定 し た い 


border-top: 文 近 全 上 側 
border-right: 文 近 全 側 
border-bottom: 文 区 下 側 
border-left: 文 所 人 左側 





大 eeeeeborder-width の 値 ( 枠 線 の 太 さ ) 
芝 seeee*border-style の 値 ( 枠 線 の 種類 ) 
全 …eeesborder-color の 値 ( 枠 線 の 色 ) 





ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 名 種 指定 を 、 枠 線 で と に まとめ て 指定 し ます 。 

border-toD は 上 の 枠 線 に 、border-right は 右 の 枠 線 に 、borer-bottom は 下 の 枠 線 に 、 
border-left は 左 の 枠 線 に 適用 され ます 。 

これ ら の プロ パテ ィ に 対し て 、 太 さ (border-width)、 種 類 (border-style)、 色 (border- 
color) の それ ぞ れ の 値 を 、 半 角 ス ペー ス で 区 切っ て 任意 の 順番 で 指定 し ます 。 値 を 省略 する と 各 
プロ パテ ィ の デフ ォ ル ト が 適用 され ます の で 、border-style (デフ ォ ル ト は none) の 値 は 必ず 
指定 し て くだ さい 。 


192 個別 の 枠 線 ご と に 一 括 し て 指定 し た い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 
<meta http-equiv="Content-Type" content= "text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 個別 の 枠 線 こと に 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
P {width: 70% } 
が sg/7//e7 { 
border-top: 10px dotted 00: 
border-right: thin solid #ffO: 
border-bottom: 7px dashed #080: 
border-left: thick double #00f: 
padding: 15px: 





text-align: center: 
font-weight: bold 


} 

#5g/7p/e2 { 
border-bottom: solid #f66: 
border-left: 20px solid #f66: 
text-align: left 

} 

ーー テニ 

</style> 

</head> 

<bodV> 


<P id="sg/7p/e7"> 

個別 の 枠 線 ご と に 一 括 し て スタ イル を 指定 し て いま す 

</P> 

<P id="sg/7p/e2"> 

省略 され た 値 は その プロ パテ ィ の デフ ォ ル ト 値 が 適用 され ます 
</D> 

</bodV> 

</html> 
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rosoft Internet Explorer 


個別 の 枠 線 ご と に 一 括 し て スタ イル を 指定 し て いま す 


ーー 


置 省 早 され た 値 は さそ の プロ パテ ィ の デフ ォ ル ト 値 が 適用 され ます 





個別 の 枠 線 こ と に 一 医 し て 指定 し た 0 





個別 の 枠 線 ご と に 一 括 し て スタ イル を 指定 し て いま す 


だ に ドナ 


圏 演 早 され た 値 は その プロ パテ ィ の デフ ォ ル ト 値 が 適用 され ます 











TE! IE5 IE5.5 IE6 TI NN4.7 N6.2 
共通 O O O O x x O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
株 の 太 さ を 個別 に 指定 し た い -………ー…ー… p.173 枠 線 の 種類 を 個別 に 指定 し た い …… ド ……………… p.185 
「 ア 枠 線 の 色 を 個別 に 指定 し た い ・…… ド ーーー PD.179 枠 線 を 一 括 し て 指定 し た い … バ ee p.195 





194 個別 の 枠 線 ご と に 一 括 し て 指定 し た い 


12 
神 線 を 一 括 し て 指定 し た い 


border: 文 区 全 











支 *eeeesborder-width の 値 ( 枠 線 の 太 さ ) 
丸 weeesborder-style の 値 ( 枠 線 の 種類 ) 
人 eeecborder-color の 値 ( 枠 線 の 色 ) 






ボッ クス 領域 の 上 下 左右 の 枠 線 (ボー ダー) の 各種 指定 を まとめ て 指定 し ます 。 

太 さ (border-width)、 種 類 (border-style)、 色 (border-color) の それ ぞ れ の 値 を 、 半 角 
スペ ー ス で 区 切っ て 任意 の 順番 で 指定 し ます 。 値 を 省略 する と 各 プ ロ パ ティ の デフ ォ ル ト か が 適用 
され ます の で 、border-style (デフ ォ ル ト は none) の 値 は 必ず 指定 し て くだ さい 。 

な お 、border プロ パテ ィ で は 上 下 左右 の 枠 線 に 対し て 個別 の 指定 を 行う こと は で きま せん 。 


ANS 千 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<htm> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv= "Content-Style-Type" content="text/css"> 
<title> 桁 線 を 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
div 人 { 
font-size: 12pt: 
width: 60%: 
padding: 20px: 
border: 10px solid #000080: 
Hine-height: 2em 





span { 
border: 2px dotted #f06: 
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background-color: #ffc 


ーー ニテ 

</style> 

</head> 

<body> 

<diV> 

Web ペー ジ を 記述 する HTML は 、<spanz> 文書 の 論理 的 な 構造 を 示す 言語 </span> で す 。 
た と えば 、 見 出し が あり 、 本 文 の 中 に 段落 や リス ト が あり …… と いっ た よう に 、 文 書 が どの 
よう な 要素 で 構成 され て いる の か 、 ま た ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を 
も っ て いる の か を 、 コ ンピュータ に 知ら せる た め の 言 語 な の で す 。 表現 方 法 を 指定 する た め 
の 言語 で は あり ませ ん 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指 
定 、 レ イア ウト の た め の テ ー ブ ル の 利用 な ど 、 文 書 の 体 坊 、 つ まり 見 栄え まで も 定義 する よ 
うに な っ て いき まし た 。W3C で は この 状況 を 改め る た め 、<span> 構造 に 関す る 指定 と 体 
裁 に 関わ る 指定 と を 分 離さ せ </span>、HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 
方 法 を 導入 し よう と 考え る よう に な り ま し た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の が 
<SDan> スタ イル シー ト の 概念 </span> で す 。 

</div> 

</body> 

</htm> 











Web ペ ー ジ を 記述 する HTML は 、 書 の 講 理 63 な 構造 を 示す 革 庄 で す . た と 

えば . 見 出し が あり 、 本 文 の 中 に 段 玲 や リス ト が あり …… と いっ た よう に 文 

書 が どの よう な 要素 で 構成 され て いる の か 、 また ある 特定 の 部 分 が 文書 全体 
の 中 で どの よう な 重 味 を も っ て いる の か を 、 コン ピュ ー タ に 知ら せる た め の 千 
語 な の で す 。 表現 方 法 を 指定 する た め の 言 語 で は あり ませ ん 。 し か し 実際 


は 、 Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レイ アウ ト の た め の テ 
ー ブ ル の 利用 な ど 、 文書 の 体 封 つまり 見 栄え まで も 定義 する よう に な っ て い 
きま し た 。WGC で は この 状況 を 改め る た め 、 縛 造 に 関す る 指定 と 体 基 に 関わ 
る 指定 と を 分 離 き ぜ | HTM_ の 機能 で は な い 体 藻 の 制御 に つい て は 別 の 方 法 
を 導入 し よう と 考え る よう に な り まし た 。 こ うし た 姿勢 の も と に 生み 出さ れ た の 





























Web ペ ー ジ を 記述 する HTM_ は 、 芝 書 の 貫 理 6973 構造 を 示す 言 計 です. たとえば. 見 出 
し が あり 、 本 文 の 中 に 段 除 や リス ト が あり …… と いっ た よう に 、 文書 が どの よう 要素 で 
桶 成 され て いる の か 、 また ある 特定 の 部 分 が 文書 全体 の 中 で どの よう な 意味 を も っ て い 
る の か を 、 コン ピュ ー タ に 知ら せる た め の 言 語 な の で す . 表現 方 法 を 指定 する た め の 言 
語 で は あり ませ ん 。 し か いし 実際 は 、 Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 . し 
イア ウト の た ゆめ の テー ブル の 利用 な ど 、 文書 の 体 震 、 つま り 見 栄え まで も 定義 する よう に 
な っ て いき まし た 。 VGC で は この 状況 を 改め る た め 、 縛 造 に 関す る 指定 と 体 戴 に 関わ る 
提 放 と を 分 底 きせ | HTML の 機能 で は な い 体 款 の 制御 に つい て は 別 の 方 法 を 導入 し よう 
と 考え る よう に な り ま し た 。 こう し た 姿勢 の も と に 生み 出さ れ た の が 区 タダ イル ジー トド の 機 
で す 。 





















1 プイ! 1 1 王寺 】 1 ココ 2 N6.2 
共通 O O 〇 O O O ※ (⑨) 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
博昭 枠 線 の 太 さ を 一 括 し て 指定 し た い ・ 176 枠 線 の 種類 を 一 括 し て 指定 し た い …・……・……・…・ p.188 
し 枠 線 の 色 を 一 括 し て 指定 し た い …・ p.182 個別 の 枠 線 ご と に 一 括 し て 指定 し た い …………・… p.1882 
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widths 文 


height: 文 


支 *esees サ イズ を 表す 数 値 + 単位 
パー セン ト を 表す 数 値 +% 
あー ワー 








要素 の 内 容 が 表示 され る 、 内 容 領域 の 幅 と 高 さ を 指定 し ます 。 

これ ら の プロ パテ ィ は ブロ ッ ク レ ベル 要素 と 置換 要素 (指定 され た 内 容 で 置換 され る 要素 。 た 
と えば img 要素 は src 属性 で 指定 され た 内 容 に 置換 され る 。 他 に input、textarea、select な ど ) 
に 対し て 適用 され ます が 、width は 非 置 換 イ ン ラ イン レベ ル 要 素 や 、 テ ー ブ ル の 横 列 と 横 列 グル 
ー プ に 関す る 要素 (tr、thead、tbody、tfoot)、height は 非 置 換 イ ン ラ イン レベ ル 要 素 や テー 
ブル の 縦列 に 関す る col 要素 、colgroup 要素 に は 適用 され ませ ん 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 





サイ ズ を 表す 数 値 十 単位 
数 値 に 単位 を つけ て 幅 や 高 さ を 指定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 


パー セン ト を 表す 数 値 二 % 
親 要 素 の 幅 や 高 さ に 対す る 割合 で サイ ズ を 指定 し ます 。 


キー ワー ド 
auto ブラ ウザ が 自動 的 に サイ ズ を 設定 


ブラ ウザ に よる 幅 と 高 さ の 違い ECCCCCCCCPPCCCCYY OCTYYYYTYYYYYYYY い の 


Internet Explorer の 標準 準拠 モー ド と 換 モー ド (p.51 参照 ) で は width プロ パテ ィ と height プロ パ 
ティ に よっ て 設定 され る サイ ズ が 異な り ま す 。CSS の 標準 仕様 に し た が っ て 正しく 表示 を する 標準 準拠 
モー ド で は 要素 の 内 容 領域 の ソサ イズ と し て 解釈 ・ 表 示さ れ ま す が 、 従 来 の ブラ ウザ と 同様 の 表示 を する 互 
換 モ ー ド で は 内 容 領域 に その 周り の パ デ ィ ン グ と 枠 線 を 加え た サイ ズ と し て 解釈 ・ 表 示さ れ ま す 。 パ ディ 
ング や 枠 線 の と りか た に よっ て は 表示 に 大 き な 違 い が 生じ て し まう こと が あり ます の で 、width と height 
で サイ ズ を 指定 する 場合 に は 注意 し て くだ さい 。 

な お 、Netscape で は どちら の モー ド で あっ て も 、 内 容 領域 の ソサ イズ と し て 解釈 表示 され ます 。p.175 
や p.197 の サン ブル で 、 両 ブラ ウザ の 表示 内 容 の サイ ズ が 大 きく 異な る の は 、 こ の 違い に よる も の で す 。 

本 項 の サン プル は 標準 準拠 モー ド の た め 両 ブラ ウザ の 表示 の 違い は あり ませ ん 。 


COOKTYTKRKIYYKYYYKYYSYRYYSYKYKRRKKKRRRKRRKRKLAYEKKYLKKKKEKKKKIEKLEEELI OYKYYYYO 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 


"http://Www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 内 容 領域 の 幅 と 高 さ を 指定 し た い </ せ itle> 
<style type="text/css"> 








<!-- 
p { 
width: 50%: 
background-color: #ff99cc 
} 
div { 
width: 50%: 
heiqht: 60px: 
background-color: orange 
} 
textarea { 
width: 50%: 
height: 100px: 
backqround-color: #ccffff 
} 
ーー テ 
</style> 
</head> 
<body> 


<P> 幅 50% に 指定 </D> 

<div><pz> 幅 509%% に 指定 </p></diV> 

<br> 

<textarea> 幅 50%、 高 さ 100 ピク セル の 入力 フィ ー ル ド </textarea> 
</bodV> 

</html> 




















内 容 箱 圭 の 幅 と 
テイ ル (D 














サイ ズ を 指定 する HTML タグ を CSS に 改め る CCCEGKCCCCCOCOUEKYPCCLLKKCCLLLLLK て | 


HTML で は 画像 や テー ブル な どの サイ ズ を 次 の よう に width 属性 、height 属 性 で 指定 し ます 。 


<imd src=" 区 " width=" 友 "height=" 全 "> 
<table width=" 畜 " height=" 人 "> ー</table> 
<th width=" 廊 "height=" 人 ">ー</th> 

<td width=" 廊 " height=" 人 る "> ーー</td> 


画像 の サイ ズ (一 画像 ファ イル の URL) 
テー ブル の サイ ズ 

セル の サイ ズ 

セル の サイ ズ 


文 一 幅 の 値 
人 一 高 さ の 値 


<th><td> タグ へ の サイ ズ の 指定 は Deprecated (推奨 し な い ) と され て お り 、 セ ル の サイ ズ は スタ イ 
ル シ ー ト で 指定 する こと が 推奨 され て いま す 。 な お 、 ス タイ ル シ ー ト を 使う と 、 画像 や テー ブル だ け で な 
く 他 の 多く の 要素 に 対し て サイ ズ を 指定 する こと が で きま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 
以下 の よう に な り ま す 。 

img {width: 娘 : height: 全 } 
table {width: 娘 : height: 人 } 
th {width: 娘 : height: 人 } 
td {width: 放 : height: 人 } 























支 一 幅 の 値 
一 高 さ の 値 
width 1】 1 王 】 1 王 二 】 1 ゴゴ NN4 ドド し 守 4 に ルイ 
サイ ズ O O O O O O O 
バー セン ト O O O O O O O 
auto O O O O O O O 
11 1 | 王 ] IE5.5 1 ココ NN4 NN4.7 ド に ル 4 
サイ ズ O O O O も 3 メ O 
バー セン ト O O O OO O ※ O 
auto O 9】 O 〇 O X 53 〇 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


内 容 が あふ れる 場合 の 処理 方 法 を 指定 し た い ……・p.230 








POSITIONING 


display: 文 





支 *eeces キ ー ワ ー ド 





要素 を イン ライ ン レ ベル 要素 や ブロ ッ ク レ ベル 要素 に 設定 し 、 表 示 形 式 を 指定 し ます 。 
値 に は 以下 ひ キ ー ワ ー ド が あり ます 。 

block ブロ ッ ク レ ベル 要素 と し て 扱う 

inHine イン ライ ン レ ベル 要素 と し て 扱う (デフ ォ ル ト ) 

Hist-item リス ト 項 目 用 の ボッ クス を 生成 する 

none 表示 され な い 


block を 指定 し た 要素 は ブロ ッ ク レ ベル 要素 と な り 、 要 素 の 後に 改行 が 入り ます 。 プ ロ パ ティ 
の 中 に は ブロ ッ ク レ ベル 要素 に し か 適用 され な いも の も ある た め 、 ブ ロッ クレ ベル 以外 の 要素 に 
そう し た プロ パテ ィ を 設定 し た い 場 合 に は block を 指定 し ます 。 

inline を 指定 し た 要素 は イン ライ ン レ ベル 要素 と な り 、 要 素 の 後に 改行 は 入り ませ ん 。 list- 
item で は 指定 し た 要素 に 対し 、 リ スト 内 容 を 表示 する ボッ クス と リス トマ ー ク 用 の イン ライ ン ボ 
ックス を 生成 させ ます 。 

none を 指定 する と 、 要 素 が 表示 され な く な り ま す 。 ボ ックス その も の が 生成 され な いた め 、 
レイ アウ ト に も 影響 を 与え ませ ん 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona/EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 表示 形式 を 指定 し た い </tHitle> 

<stvle type="text/css"> 


<!-- 

span,div { background-color: #66ff00 } 
-Sg77/e7 { display: block } 

.5g77/e2 { display: none } 

.Sg77//e3 { display: iniine } 

-Sg77D/e4 { display: tist-item } 


div.sg77//e5 { margin-left: 1em } 

ーー テ 

</style> 

</head> 

<bodV> 

<P> この 下 に は 表示 され な い 画 像 が あり ます 。<br> 

<imd src="birds3.jpg" class="so7ple2" width="100" height="100" alt=""> 
</P> 

<P> 表示 形式 を 指定 し ます : <span class="sgp/e7">block を 指定 </span> する と こ 
ん な 感じ 。</P> 

<P> 表示 形式 を 指定 し ます : <span class="sg/p/e2">none を 指定 </span> する と こ 
ん な 感じ 。</P> 

<P> 表示 形式 を 指定 し ます : <div class="sgp/e3">inline を 指定 </div> する と こん な 
感じ </P> 

<P> 表示 形式 を 指定 し ます : <div class="sg77p/e5"><span class="sg77p/e4 ">list- 
item を 指定 </span><span class="sgp/e4">list-item を 指定 </span></div> する と 
こん な 感じ 。</P> 

</bodV> 

</htm> 




















アッ の PD mV pmOO ツー ん へ 

OR・ の 回 の の mw 支 Pmoo @7o の 合 - 及 四 ・ 
この 下 に は 表示 され な い 画 像 が あり ます . 

表示 形式 を 指定 し ます : 

表示 形式 を 指定 し ます : する と こん な 感じ 、 


表示 形式 を 指定 し ます : 
頭 国 還 較 較 すろ と ん な 感じ 


表示 形式 を 指定 し ます : 


・ 半 1 90 
する と こん な 感じ 。 








』 < 
この 下 に は 表示 され な い 画 像 が あり ます 、 

表示 形式 を 指定 し ます : 

表示 形式 を 指定 し ます : す る と こん な 感じ 。 

表示 形式 を 指定 し ます : 

右 還 机 義 する と こん な 感じ 

表示 形式 を 指定 し ます : 


村主 OOOOO55 こん な 感じ 。 

















@*・ の 回 還る 
この 下 に は 表示 され な い 画 像 が あり ます 。 


プ 


表示 形式 を 指定 し ます : 較 軒 証 雇 題する と こん な 感じ . 
表示 形式 を 指定 し ます : 較 証 証 本 畔 する と こん な 感じ 。 
表示 形式 を 指定 し ます : 

る と こん な 感じ 

表示 形式 を 指定 し ます : 

する と こん な 感じ 。 





4 display プロ バテ ィ を 指定 し な い 場 合 の 表示 


display プロ バテ ィ の 用 途 SOCCGEL PPPCCPCPCCLTYYPPPCCYEYYD CCCYTTYTYYYYYKCCLLY 


display プロ パテ ィ で は 、 イ ン ラ イン レベ ル 要 素 か ら ブ ロッ クレ ベル 要素 へ と いっ た 表示 形式 の 変更 が 
指定 で きま す 。 で は この 属性 は どの よう な 場合 に 使用 する の で し ょ うか 。 そ れ は 主 に XML と いう こと に 
な り ま す 。 

HTML に お ける 要素 は 、 イ ン ラ イン レベ ル 要 素 と ブロ ッ ク レ ベル 要素 に 大 別 さ れ ま す が (Dp.3 参照) 、 
XML で は ユー ザー が 定義 し な い 限 り 要 素 は どちら に も 属し ませ ん 。 こ の 定義 を 行う の が display で す 。 

同様 に HTML で の 実装 の 仕方 が わか り に くい プロ パテ ィ と し て 、vVisible プロ パテ ィ や z-index プロ パ 
ティ な ども あげ る こと が で きま す 。 し か し これ ら の プロ パテ ィ は Dynamic HTML な ど で Web ペー ジ を 
動 的 に 動か す 際 に は な く て は な ら な いも の で す 。 

スタ イル シー ト は HTML だ け で は な く 、Dynamic HTML や XML な ど Web テク ノロ ジー 全般 に わた 
つて 使用 で きる 技術 な の で す 。 


DOCCEXYXEJ DOTKYIIXXKX】 DOKOKERTKX ス スミ スミ ミミ ミミ ミミ スミ ミミ スミ ミミ ミミ ミト メメ ミミ ミミ ミミ ミミ ミミ ミミ メメ スミ 】 















































1! IE5 IE5.5 IE6 NN4 NN4.7 に ルコ 
block も 3 も 3 O O O O O 
inline も 3 O O O O O ⑨ 
listitem メ 3 O O O 9 O 〇 
none O O O 〇 O O O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


表示 ・ 非 表示 を 指定 し た い ………ー ド ーー ドー p206 


隊 民 
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PO5ITIONING 


visibility: 文 





文 *eeece キ ー ワ ー ド 





要素 の 表示 ・ 非 表示 を 指定 し ます 。 

値 に は 以下 の キー ワー ド が あり ます 。 
visible 表示 (デフ ォ ル ト ) 
hidden 表示 し な い 


display: none (Dp.202 参照 ) は その 要素 その も の が な いか の よう に レイ アウ ト に も 影響 を 与 
えま せん が 、Vvisibility: hidden で は 要素 の 内 容 は 表示 され ませ ん が 表示 分 の スペ ー ス は 確保 され 
る た め レ イア ウト に も 影響 し ます 。 

Visibility プロ パテ ィ で は 、Dynamic HTML や スク リプ ト と 組み 合わ せ て ある アク ショ ン に よ 
っ て 画像 が 表示 され る と いっ た 動 的 な ペー ジ を 、 レ イア ウト を 変更 する こと な く 作 成す る こと が 
で きま す 。 


MM 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 表示 ・ 非 表示 を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

img {visibiity: hidden } 

ーー 

</style> 

</| head> 








<body> 

<P> この 下 に は 表示 され な い 画像 が あり ます 。<br> 

<img src="birds3.jpg" width="100" height="100" alt=""> 

</P> 

<P テ > 

画像 は 表示 され ませ ん が 表示 分 の スペ ー ス は 確保 され る た め レ イア ウト に も 影響 し ます 。 
</p> 

</body> 

</html> 



















当 表示 ・ 非 表 示 を 搭 定 し た い - Microsoft Internet Explorer 
アカ イル) 編集 表示 お 気 に 入 DQ ツール CD へ A ル 2⑱ 


GR の 回 回 @ の we 誠 5m20 休 7 の の @- 和 ” 回 
この 下 に は 表示 され な い 画 像 が あり ます 。 


画像 は 表示 され ませ ん が 表示 分 の スペ ー ス は 確保 され る た め レ イア ウト に も 影響 し ます 。 









この 下 に は 表示 され な い 画 像 が あり ます 。 


画像 は 表示 され ませ ん が 表示 分 の スペ ー ス は 確保 され る た め レ イア ウト に も 影響 し ます 。 














1 3 1 キ 】 日 王 和 ) IE6 NN4 ドド し 4 に に ルコ 
visible O O O O メ メ O 
hidden O O O 〇 〇 O し 3 3 〇 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
参照 表示 形式 を 指定 し た い …… バ ドド ドド ドー ドー p.202 
4 ジア 要素 の 一 部 を 切り 抜き 表示 し た い …………………… p225 
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POSITIONING 


POsition: 文 





支 *eeee キ ー ワ ー ド 





要素 の 配置 方 法 を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
static 配置 方 法 を 特に 指定 し な い (デフ ォ ル ト ) 
relative 通常 表示 され る 位置 か ら の 相対 的 な 配置 
absolute 親 要素 に 対し て 絶対 的 に 配置 
fixed 親 要素 に 対し て 絶対 的 に 配置 (位置 は 固定 され 、 ス クロ ー ル し て も 移動 
し な い ) 


static を 指定 する と top、left、right、bottom (次 ペー ジ 以 降参 照 ) と いっ た 表示 位置 を 調整 
する プロ パテ ィ は 無効 に な り ま す 。 

relative は 、 そ の 要素 が 通常 表示 され る 位置 か ら の 相対 的 な 配置 を 指定 し ます 。 つ まり 
relative の 状態 で "top: 40px: left: 120px" と 指定 する と 、 通 常 表 示さ れる 位置 を 基準 と し て 、 
上 端 か ら 40 ビク セル 、 左端 か ら 120 ビク セル の 位置 に 表示 され ます 。 

absolute は 親 要素 か ら の 絶対 的 な 配置 を 指定 し ます 。 た と えば 、 次 ペー ジ の サン ブル で は 
<div> タグ の 親 要素 で ある <body> タグ の ボッ クス 領域 上 端 か ら 200 ピク セル 、 左端 か ら 200 
ピク セル の 位置 に 表示 され ます 。 こ の 値 を 指定 する と 、 他 の 要素 に 影響 を 与え な い 独 立 し た 配置 
に な り ま す 。 

fixed の 配置 位置 は absolute と 同じ で す が 、 表 示 位 置 が 固定 され 、 ス クロ ー ル し て も 位置 が 変 
わら な く な り ま す 。 

position プロ パテ ィ を 単独 で 指定 し て も あま り 効 果 は な く 、 通 常 は top、left、right、 
bottom と いっ た 表示 位置 を 指定 する プロ パテ ィ と と も に 使用 し ます 。 


208 本 呈 了 GHEIN 全 0 の NNSENNNY っ NN 
ヒレ レニ トト ト b ト b ト シラ シ b ト b ル U シ レ b ト b レ 、 ニ トニ トペ Q ト G ーー ニー パー ーー 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content= "text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 表示 形式 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
body { margin: 0 } 
div { 
width: 200px: 
height: 100px: 
font-weight: bold 


} 
.S077/e7 { 
position: static: 
top: 200px: 
left: 200px: 
background-color: #ff99ff 
0 
-S077//e2 { 
Position: relative: 
top: 200px: 
left: 200px: 
backgqround-color: 計 f9933 
} 
.S077//63 { 
position: absolute: 
top: 200px: 
left: 200px: 
backqround-color: 寺 fff00 
} 
-Sg77D/e4 { 


position: fixedi 





要素 の 配置 方 法 を 指定 し た い 
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bottom: 0px: 
right: 0px: 
background-color: #00ffff 
} 
ーー テ 
</style> 
</head> 
<body> 
<div class="sgp/e7 ">static</div> 
<div class="sg7p/e2" >relative</div> 
<div class="sg/7p/e3" >absolute</div> 
<div class="sgp/e4" >fixed</div> 
</body> 
</html> 








配 








指定 し た い - Microsoft mt 


アイ ル (上 編集) 表示 お 気 に 入 0⑯ ウー ル D ルプ ⑪ 


〇 ゃ ・ の 回 回 の の ws 吉 5mOo 侍 カ の の 伯 有 あ 回 回 





人 人 Internet Explorer は fixed に 対応 し て いな い の で 、fixed を 指定 し た ボッ クス の み 意 図 し た 表示 に な り ま せん 
(static、absolute、relative に は 対応 し て いま す ) 













ドキ ュ メル : 完 了 (019 秒 ) さそ 


4 Netscape 6 は fixed に も 対応 し て いま す 。 


ka デコ mn ae 


スク ロー ル し て も fixed の 位置 は 変わ り ま せん 置 








right:0px 


通常 の 表示 位置 





人 人 各 ポ ボッ クス は それ ぞ れ この よう に 配置 され ます 














IE5.5 1 ヨゴ ドド [3 NN4.7 ド に に ルコ 
static O O O O O 
relative O O O O O 
absolute p O O 〇 O O 
fixed も 3 ※ し 3 ※ し 3 O 








※ は Macintosh 版 IE5 は 対応 し て いま す 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
scil 合 


で 村 素 の 配置 位 置 指 定 し た い ・ 
= 重ね 合わ せ の 順序 を 指定 し た い ・… *zsspj ら ら 


NM 211 












POSITIONING 


topx 太 上 端 か ら の 位置 


bottom: 文 下端 か ら の 位置 
left: 文 左端 か ら の 位置 
right: 文 右端 か ら の 位置 





サイ ズ を 表す 数 値 単位 
パーセント を 表す 数 値 +% 
キー ワー ド 





要素 の 上 下 左 右 の 配置 位置 を 指定 し ます 。 position プロ バテ ィ の 値 と し て relative、 absolute、 
fixed を 指定 し て いる と き に 利用 で きま す 。static を 指定 し た 場合 は 無効 に な る の で 注意 し て くだ 
さい 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 





サイ ズ を 表す 数 値 十 単位 

数 値 に 単位 を つけ て 位置 を 指定 し ます 。 単位 に つい て は p.46 を 参照 し て くだ さい 。 

relative で は 本 来 の 表示 位置 の 、absolute と fixed で は 親 要 素 の 、 上 下 左右 の 端 が 基準 に な り 
ます 。 


パー セン ト を 表す 数 値 十 % 

親 要素 の 高 さ (top、bottom の 場合 )、 ま た は 幅 (left、right の 場合 ) に 対す る 割合 で 位置 を 
指定 し ます 。 た と えば 、 親 要素 の 高 さ が 400 ピク セル の 場合 に 109% を 指定 する と 40 ピク セル の 
位置 に 表示 され ます 。 relative で も 親 要 素 に 対す る 割合 と な り ま す 。 


キー ワー ド 
auto 通常 位置 に 配置 (デフ ォ ル ト ) 
auto を 指定 する と 、 配 置 位置 は 自動 的 に 調整 され ます 。 


要素 の 配置 位置 の 具体 的 な 指定 方 法 に つい て は position プロ パテ ィ の 頂 (p.208) を 参照 し て 
くだ さい 。 

ここ で は position:fixed と 位置 指定 を 利用 し た フレ ー ム 風 の レ イア ウト を 紹介 し ます 
(Windows 版 の Internet Explorer は position:fixed に 対応 し て いな い の で フレ ー ム 風 に は な り 
ませ ん )。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 要素 の 配置 位置 を 指定 し た い </title> 
<stvle type="text/css"> 
<!-- 
body {margin: 0 } 
div { 
font-weight: bold: 
position: fixed 


が 57der { 
top: 0: 
right: auto: 
bottom: 100px: 
left: 0 
width: 200px: 
height: auto: 
backgqround-color: 盾 f99ff 





放 7g77 { 
top: 0: 
right: 0: 
bottom: 100px: 
left: 200px: 
width: auto: 
heiqht: auto: 
background-color: ff9933 


} 

ooer { 
top: auto: 
right: 0: 











bottom: 0: 
left: 0: 
width: 100%: 
height: 100px: 
background-color: #ffff00 
} 
ーー テニ 
</style> 
</head> 
<bodV> 
<div id="s/7e/">slider</ diV> 
<div id=" 罰 7 ">main</diV> 
<div id="7oofe/">footer</div> 
</body> 
</htm> 











F まほ . も ゴリ 
アイ ル (FE) 編集 D 表示 ⑩⑰ 


ms・@ の - 較 還る の scA9 侍 の の 加 - 和 あ 較 ・。』 の 2 





| 久 ペ ー ジ が 表示 され まし た 


人 Internet Explorer は fixed に 対応 し て いな い の で この 場合 は 意図 し た 表示 に な り ま せん (top、right、bottom、 
left に は 対応 し て いま す ) 
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bottom:i00px 
^ 





- 
4 position:fixed に 対応 し て いる 場合 、 各 ボッ クス は この よう な 配置 関係 と な り ま す 




















top、left 1 1 エ 】 NN4 NN4.7 ド に ルコ 
サイ ズ O 〇 O O 〇 〇 
パー セン ト O 〇 O O O O 
auto O O O O O O O 

bottom、right IE4 1 三 ]】 1 王 基 ]】 1 コミ : ドド 1 ドド じ 守 4 ド に ルコ 
サイ ズ (人 C O り ※ 3 O 
パー セン ト O O の 】 C ※ ※ O 
auto 〇 O ぶ O メ % O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


か 要素 の 配置 方 法 を 指定 し た い ・… 
2 め 重 ね 合わ せ の 順序 を 指定 し た い ・ 
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POSITIONING 


float: 友 





文 *ecce キ ー ワ ー ド 





対象 と な る ボッ クス 領域 を 左 、 あ る い は 右 に 寄せ 、 そ の 反対 側 に 複数 行 の テキ スト を 流し 込む 
よう 指定 し ます (回 り 込み )。 


値 に は 以下 の キー ワー ド が あり ます 。 


left ボッ クス 領域 は 左側 に 寄り 、 続 く テ キス ト は 右側 に 回 り 込 む 
清 nght ボッ クス 領域 は 右側 に 寄り 、 続 く テ キス ト は 左側 に 回 り 込 む 
none 回 り 込 み は 行わ れ な い (デフ ォ ル ト ) 


な お 、position プロ パテ ィ に absolute を 指定 する と 、float プロ バテ ィ は 無効 に な か り ま す 。 
回 り 込 み を 解除 する に は clear プロ パテ ィ (p.219 参照 ) を 指定 し ます 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Stvle-Type" content="text/css"> 
<title> 回 り 込み を 設定 し た い </ せ tle> 
<stvle type="text/css"> 
に に 
img { margin: 15px } 
img./e 太 {float: left } 
img./7g7 た {float: right } 
p { 
font-size: 15pt: 
line-height: 150% 


hr { clear: both } 

ーー テ 

</style> 

</head> 

<bodV> 

<D> 

<img src="birds3.jpg" class="/e 胡 "width="200" height="200" alt=""> 
foat プロ パテ ィ は …… (中 略 ) …… 回 り 込 み は 行わ れ ま せん (デフ ォ ル ト ) <br> 
な お 、position プロ パテ ィ に absolute を 指定 する と …… (中 略 ) …… を 設定 し ます 。 
</P> 

<hr> 

<D テ > 

<imd src="birds3.jpg" class="77g7 た "width="200" height="200" alt=""> 
fioat プロ パテ ィ は …… (中 略 ) …… 回 り 込み は 行わ れ ま せん (デフ ォ ル ト ) <br> 
な お 、position プロ パテ ィ に absolute を 指定 する と …… (中 略 ) …… を 設定 し ます 。 
</P> 

</bodV> 

</html> 
































fioat プ ロ パ ティ は 対象 と な る ボッ クス 領域 を 左 . ある い は 右 に 寄せ 、 そ の 反対 側 に 複数 行 
の テキ スト を 流し こむ よう 指定 し ます (回 り 込み ) . 値 に left を 指定 する と ポッ クス 領域 は 左 
側 に 寄り 、 続く テキ スト は 右側 に 回 り 込 み ま す . 値 に nght を 指定 する と . ボッ クス 領域 は 右 
側 に 寄り 、 続く < テキ スト は 左側 に 回 り 込み ます . nons を 指定 し た 場合 に は 回 り 込み は 行わ 
れ ま せん (デフ ォ ル ト ) . 

な お 、 position プ ロ パ ティ に absclute を 指定 する と 、 fogt プ ロ パ ティ は 無効 に な り ま す . 回 り 
込み を 解除 する に は clear プ ロバ ティ を 設定 し ます 。 





fioat ブ プロパティ は 対象 と な る ポッ クス 領域 を 左 . あ る い は 石 に 寄せ 、 そ の 反対 側 に 複数 行 
の テキ スト を 流し こむ よう 指定 し ます (回 り 込み ) . 値 に left を 指定 する と ポッ クス 領域 は 左 
側 に 寄り 、 続く テキ スト は 右側 に 回 り 込 み ま す . 値 に nght を 指定 する と 、 ボッ クス 領域 は 右 
側 に 寄り 、 続く < テキ スト は 左側 に 回 り 込み ます . nons を 指定 し た 場合 に は 回 り 込み は 行わ 
れ ま せん (デフ ォ ル ト ) . 

な お 、 position プ ロバ パテ ィ に absolute を 指定 する と . float プロパ ティ は 無効 に な り ます . 回 り 
込み を 解除 する に は clear ブ プロ パテ ィ を 設定 し ます . 




















float プ ロ パ ティ は 対象 と な る ボッ クス 領域 を 左 . ある い は 右 に 寄せ 、 そ の 反対 側 に 複数 行 の 
テキ スト を 流し こむ よう 指定 し ます (回 り 込み ) . 値 に left を 指定 する と ボッ クス 額 域 は 左側 に 
寄り 、 続く テキ スト は 右側 に 回 り 込 み ま す . 値 に nght を 指定 する と 、 ボ ックス 領域 は 右側 に 寄 
り 、 続く テキ スト は 左側 に 回 り 込み ます . none を 指定 し た 場合 に は 回 り 込み は 行わ れ ま せん 
(デフ ォ ル ト ) 

な お 、 position プ ロ パ ティ に absolute を 指定 する と 、 float ブ プロパ ティ は 無効 に な り ま す . 回 り 込 
み を 解除 する に は clear プ ロバ ティ を 設定 し ます . 





float プ ロバ ティ (は 対象 と な る ボッ クス 領域 を 左 . ある い は 右 に 寄せ 、 そ の 反対 側 に 複数 行 の 
テキ スト を 流し こむ よう 指定 し ます (回 り 込み ) . 値 に left を 指定 する と ボッ クス 領域 は 左側 に 
寄り . 続く < テキ スト は 右側 に 回 り 込み ます . 値 に right を 指定 する と 、 ボ ックス 領域 は 右側 に 寄 
り 、 続 く < テキ スト は 左側 に 回 り 込 み ま す . none を 指定 し た 場合 に は 回 り 込み は 行わ れ ま せん 
(デフ ォ ルト ) 。 

な お 、 position プ ロ パ ティ に absolute を 指定 する と 、 fioat プ ブロ パテ ィ は 無効 に な り ま す 。 回り 込 
み を 解除 する に は claar プ ロ パ ティ を 設定 し ます 。 























left O O O O O O 
right O O O O O O O 
none O O O O O O O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
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POSITIONING 


clear 太 





文 ecce キ ー ワ ー ド 


float ブロ パテ ィ で 設定 し た 回 り 込 み を 解除 し ます 。 
値 に は 以下 の ひ キ ー ワ ー ド が あり ます 。 


left 左側 の 要素 に 対す る 回 り 込み を 解除 (float: left の 回 り 込み を 解除 ) 
riqht 右側 の 要素 に 対す る 回 りこ み を 解除 (float: right の 回 り 込 み を 解除 ) 
both 回 り 込 ませ る 側 に 関係 な く 、 回 り 込 み を 解除 

none 回 り 込み を 解除 し な い (デフ ォ ル ト ) 


(0 0 間 BO 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_J1IS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 回 り 込み を 解除 し た い </title> 
<style type="text/css"> 
<! に - 
img { marqin: 15px } 
imqg./e 左 {float: left } 
imqg.797 た {float: riqht } 
p { 
font-size: 15pt: 
line-height: 150% 


br {clear: both } 
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</style> 

</head> 

<body> 

<PD> 

<img src="birds3.jpg" class="/e 友 "width="200" height="200" alt=""> 

foat プロ バテ ィ は …… (中 略 ) …… 回 り 込 み は 行わ れ ま せん (デフ ォ ル ト )。<br> 

な お 、position プロ パテ ィ に absolute を 指定 する と 、float プロ パテ ィ は 無効 に な り ま す 。 回 
り 込 み を 解除 する に は clear プロ パテ ィ を 指定 し ます 。 


</D> 


<D> 

<img src="birds3.jpg" class="77g77" width="200" height="200" alt=""> 

foat プロ パテ ィ は …… (中 略 ) …… 回 り 込み は 行わ れ ま せん (デフ ォ ル ト )。<br> 

な お 、position プロ パテ ィ に absolute を 指定 する と 、float プロ パテ ィ は 無効 に な り ま す 。 回 
り 込 み を 解除 する に は clear プロ パテ ィ を 指定 し ます 。 

</P> 

</bodV> 

</htm> 


回り込み を 前 除 し K い - M 


(ん ⑰ 電球 所 お 所 に 9- ル MD へ 79 
の GR の ・ 店 6 の ws pwoo 寺 テ の の 只 - あ 回 


fioat プ ロバ ティ は 対象 と な る ボッ クス 領域 を 左 . ある い は 右 に 寄せ 、 そ の 反対 側 に 複数 行 目 
の テキ スト を 流し こむ よう 設定 し ます (回 り 込み ) 。 値 に lt を 指定 する と ボッ クス 領域 は 左 
側 に 寄り 、 続く < テキ スト は 右側 に 回 り 込 み ま す . 値 に nght を 指定 する と 、 ボ ックス 領域 は 右 
側 に 寄り 、 続く < テキ スト は 左側 に 回 り 込 み ま す . nons を 指定 し た 場合 に は 回 り 込み は 行わ 
れ ま せん (デフ ォ ル ト ) 。 





な お 、 position プ ロ パ ティ (に aksolute を 指定 する と .、 foat ブ プロパ ティ は 無効 に おり ます . 回 り 込 みき 解除 する に は clsar ブ 
ロバ パテ ィ を 設定 し ます 。 


fioat プ ロバ ティ は 対象 と な る ボッ クス 領域 を 左 . ある い は 右 に 寄せ 、 その 反対 側 に 複数 行 
の テキ スト を 流し こむ よう 設定 し ます (回 り 込み ) 、 値 に left を 指定 する と ボッ クス 領域 は 左 
側 に 寄り 、 続く < テキ スト は 右側 に 回 り 込 み ま す . 値 に nght を 指定 する と 、 ボ ックス 領域 は 右 
側 に 寄り 、 続く < テキ スト は 左側 に 回 り 込 み ま す . nns を 指定 し た 場合 に は 回 り 込み は 行わ 
れ ま せん (デフ ォ ル ト ) 。 


な お 、 psition プ ロ パ ティ に absolute を 指定 する と 、 float プロ パテ ィ は 無効 に な り ま す . 回 り 込 み を 解除 する に は claar ブ 
ロバ パテ ィ を 設定 し ます . 
EE 補 ai 











foat ブ プロパ ティ は 対象 と な る ボッ クス 領域 を 左 、 あるいは 右 に 寄せ 、 そ の 反対 側 に 複数 行 
の テキ スト を 流し こむ よう 設定 し ます (回り込み ) . 値 に left を 指定 する と ボッ クス 領域 は 左側 
に 寄り 、 続 < テキ スト は 右側 に 回 り 込み ます . 値 に ght を 指定 する と 、 ボ ックス 領域 は 右側 
に 寄り 、 続く < テキ スト は 左側 に 回 り 込み ます . nons を 指定 し た 場合 に は 回 り 込 み は 行わ れ 
ませ ん (デフ ォ ルト ) 。 

















な お 、 position プ ロバ パテ ィ に absoluts を 指定 する と 、 foat プ ロ パ ティ は 無効 に な り ます 。 回 り 込み を 解除 する に は clear ブ 











ロバ パテ ィ を 設定 し ます . 


fioat プ ロ パ ティ は 対象 と な る ボッ クス 領域 を 左 . あるいは 右 に 寄せ 、 そ の 反対 側 に 複数 行 
の テキ スト を 流し こむ よう 設定 し ます (回 り 込 み ) . 値 に left を 指定 する と ボッ クス 領域 は 左側 
に 寄り 、 続く < テキ スト は 右側 に 回 り 込 み ま す . 値 に rght を 指定 する と . ボッ クス 領域 は 右側 
に 寄り 、 続く < テキ スト は 左側 に 回 り 込み ます . none を 指定 し た 場合 に は 回 り 込 み は 行わ れ 


ませ ん (デフ ォ ル ト ) / 


な お 、 position プ ロ パ ティ に absolute を 指定 する と 、 fioat プ ロ パ ティ は 無効 に な り ます 。 回 り 込 み を 解除 する に は clear プ 
ロバ パテ ィ を 設定 し ます . 















































1 子 】 |] 1 三 長 -】 1 NN4 ドド し 守 4 N6.2 
let O O O 〇 O O O 
right O O Oo O O O O 
both O O O O O O O 
none O O O O O O O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


| * 思 2 回 り 込み を 指定 し た い 
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POSITIONING 


z-index: 文 





太 eeeee 整 数 値 





position や top、left、right、bottom な どの プロ パテ ィ に よっ て 複数 の 要素 が 重なり あっ た 
合 に 、 そ れ ら の 重なる 順序 を 指定 し ます 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


整数 値 

0 を 基 準 に し て 数 値 が 大 きく な る ほど 前 面 に 重なり 、 逆 に 数 値 が 小さ べく な る ほど 背面 に まわ り 
ます 。 な お 、Netscape 6.2 で は マイ ナス の 数 値 を 指定 する と 、 要 素 自体 表示 され な く な る よ 
う で す の で 注意 し て くだ さい 。 


キー ワー ド 
auto 記述 順 (デフ ォ ル ト ) 
通常 と 同じ く HTML 文書 で の 記述 順に 重なっ て いき 、 最 後 の も の が 最前 面 と な り ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 重ね 合わ せ の 順序 を 指定 し た い </title> 
<stvle type="text/css"> 
<!-- 
div { 
position: absolute: 
width: 200px: 
height: 100px: 
text-align: centerz 














font-size: xx-larqge 
} 
div.sg77p/e7 { 
z-index: 2 
top: 20DX: 
left: 30px: 
backqround-color: #ff99ff 
} 
div.sg77p/e2 { 
z-index: 1: 
top: 75Dx: 
left:100px: 
backqround-color: #ff9933 
} 
div.sg/p/e3 人 { 
Z-index: 3 
top: 40px: 
left: 200px: 
background-color: fff00 
} 
div.sg7p/e4 { 
z-index: 0: 
top: 160pX: 
left: 170px: 
backqround-color: #00ffff 
} 
ーー テ 
</style> 
</head> 
<bodV> 
<div class="sgp/e7">1</diV> 
<div class="sg/p/e2">2</diV> 
<div class="sgp/e3">3</diV> 
<div class="sg77p/e4 ">4</diV> 
</bodV> 
</htm> 








重ね 合わ せ の 順序 を 指定 し た い 
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委 王 ね 合わ せ の 庵 訂 を 指定 し た い - Microsoft internet Explorer 


カイル) 編集 表示 W お 気に入り ⑯ ウー ル D AM プ ⑪ 


GR の 還 回 の の ws 吉 5moo 侍 カ の の 人 ら - あ 加 ・ 生 








配 








当 重ね 合わ せ の 崎 序 を 指定 し た い - Microsoft Imternet Explorer 
カイル) 編集 CE) 表示 W) お 気に入り ウー ル ①D へ ルプ ⑪ 


@・ の 回 還る の 時 充 5m20 休 な の @ の 回 - あ 回 ・』 





人 2z-index を 指定 し な い 場 合 の 表示 





1 1 IE5.5 1 ココ N4 ド に ルル 4 
数 値 O O O O O O 
auto O O O O O O 〇 








※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


で の 配 斑 法 を 指定 し た い 
要素 の 配置 位置 を 指定 し た い ・ 








POSITIONING 


clip: 文 





友 weecs キ ー ワ ー ド 





要素 の 見 える 範 団 を 指定 し 、 切 り 抜 いた よう に 表示 させ ます 。 こ の プロ パテ ィ は position プロ 
パテ ィ (p.208 参照 ) で absolute が 指定 され た 要素 に 適用 され ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 


auto ボッ クス 全体 を 表示 (デフ ォ ル ト ) 
ret 指定 し た 乱 形 を 表示 
表示 部 分 の 座標 の 指定 


rect で は 表示 する 知 形 の 各 辺 の 位置 を 、rect( 上 , 右 , 下 , 左 ) の 座標 の か た ち で 記述 し ます 。 加 辺 の 
基準 の 位置 は 左上 で す 。 具体 的 に は 下 の 図 の よう に な り ま す 。 














clip: rect で 切り 抜き 表示 を 指定 する に は 、 
clip: rect(①,②,③,④) 
と 表示 する 知 形 の 4 辺 を rect に 続く 括弧 内 に 記述 し ます 。 
① に は 上 辺 か ら 表 示 位置 上 端 ま で の 間隔 、② に は 左辺 か ら 表 示 位 置 右端 、③ に は 上 辺 か ら 表 示 
位置 下端 、 ④ に は 左辺 か ら 表 示 位 置 左端 を 指定 し て くだ さい 。 
座標 に auto を 指定 する と 元々 の 要素 の ボッ クス の 辺 と 同じ に な り ま す 。 
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EEE'[V[COEE 和 {EE 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 要素 の 一 部 を 切り 抜き 表示 し た い </title> 
<Style type="text/css"> 
<!-- 
span { position: absolute } 
Span#Sg77p/e7 { cip: rect(20px,auto,auto,auto) } 
span が sg/7p/e2 { 
clip: rect(auto,20px,auto,auto): 
left: 150px 
} 
span が sg/7//e3 { 


clip: rect(auto,auto,auto,20px): 
left: 300px 
} 
ーー テ 
</style> 
</head> 
<bodV> 
<SDan 1d="sg/p/e7 "> 
<img src="cat.gif" width="120" height="120" alt=""> 
</sDan> 
<SDan id="sg/7p/e2"> 
<imd src="cat.gif" width="120" height="120" alt=""> 
</sDan> 
<SDan 1d="sg/7p/e3"> 
<1md src="cat.gif" width="120" height="120" alt=""> 
</span> 
</bodV> 
</html> 











226 要素 の 一 部 を 切り 抜き 表示 し た い 


当 要 和 の 一 部 を 切り 挟 き 表示 し た い - Microsoft Internet Explorer 
アイ ル F) 編集 ) 表示 お 気 に AO8) ツー ル ①D へ ルプ ⑪ 


の we 次 im 





2 








に 本 ゴリ 語る ネリ リド を 、 わ りえ 9 了 語 は | り : 提 














上 r$ ぇ ヨ ぇ # ぇ # ぇ れ ぇ れ ゃ ※ ぇ z ぇ #z# ヌ xxxx 


CSS2 の 仕様 で は 、 こ の clip プロ パテ ィ は 「overflow プロ パテ ィ に visible 以外 が 指定 され て いる 要素 ] 
に 適用 され る こと に な っ て いま す 。 ま た 、 表 示す る 乱 形 の 指定 方 法 も 上 記 の 方 法 と は 異な り 、 元 の ブロ ッ 
ク 領 域 の 各 辺 か ら の 距離 を 指定 する よう 定義 され て いま す 。 し か し 、 現 在 の ブラ ウザ は この 仕様 に 則 し て 
いま せん 。 


TOTALAIKKLRAKIKKKILKAAALKAAAKLAKKAILKKKRKERRAIERARKKRKIKIKNKKLSYKEKKXII 








1 1 1 王寺] 1 ミコ NN4 ドド 売 4 ド に に ルコ 
rect O O O O し 3 ※ O 
auto O O O O ※ も 3 O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


か 表示 ・ 非 表示 を 指定 し た い ………ーーーーー pa06 
2 ジア 要素 の 配置 方 法 を 指定 し た い …ーーーー…ーーー… p208 
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POSITIONING 


Zz00m: 文 





文 *eeeee 数 値 
パー セン ト を 表す 数 値 +% 
キー ワー ド 





要素 を 拡大 し て 表示 する 属性 で す 。Internet Explorer が 独自 に 拡張 し た プロ パテ ィ で す 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


数 値 
本 来 の サイ ズ を 1 と し て その サイ ズ に 対す る 比率 を 数 値 で 指定 し ます 。 2 な ら 2 倍 に な り 、0.5 
な ら 0.5 倍 に な り ま す 。 


パー セン ト を 表す 数 値 二 % 
本 来 の サイ ズ に 対す る 比率 を パー セン ト で 指定 し ます 。100% を 指定 する と 本 来 の サイ ズ 
(normal) を 指定 し た 場合 と 同じ 結果 に な り ま す 。 


キー ワー ド 
normal 本 来 の サイ ズ (デフ ォ ル ト ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 要素 を 拡大 表示 し た い </title> 

<stvle type="text/css"> 


き | 





.Sg77P/e7 { zoom: 150% } 
-S077/e2 { zoom: 0.5 } 
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div { margin: 30px } 
</style> 

</head> 

<bodV> 


<diV> 





<SDan> ピヨ </span><span Class="sg/7p/e7"> ピヨ </sDan> 

<sDan class="sg/p/e2"> ピヨ </span> 

</div> 

<diV> 

<img src="cat.gif" width="120" height="120" at=""> 

<imd src="cat.gif" class="sg/7p/e7" width="120" height="120" alt=""> 
<imq src="cat.qif" class="sgpie2" width="120" height="120" alt=""> 
</div> 

<form> 





<input type="button" value=" ク リッ ク 1 "> 





<input type="button" value=" ク リッ ク ! "class="sg7p/e7"> 





<input type="button" value=" ク リッ ク ! " class="sg77p/e2"> 
</form> 
</bodV> 
</html> 














EL に 販 隊 


アル 吉本 D 表示 お 気 に 入 0⑯⑥ 9-AD へ 7⑪ 
の 回 @ の wa 2 "zhaol| 


⑨ 






ビ ピヨピヨ ピヨ 


96⑨⑥ 


2 りみ 2! | 20 ウ ! | 9! 


(gg ロ wan 

















1 子 】 1 ミコ 1 王 基 ]】 1 ココ NN4 MC 売 4 ド に ルオ 
数 値 X し 3 O O と 3 X X 
パー セン ト も 3 メ り O し 3 ※ X 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
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POSITIONING 


overflow: 文 





支 eeecece キ ー ワ ー ド 





height や width で ボッ クス 領域 の 幅 や 高 さ を 指定 する と 、 コ ン テ ン ツ の 量 に よっ て は ボッ クス 
領域 内 に 収まり きら な いこ と が あり ます 。 こ の よう に コン テン ツ が あふ れる 場合 の 処理 方 法 を 指 
定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
visible 領域 指定 を 無視 し て 高 さや 幅 を 調整 し 、 収 まり きら な い コ ン テ ン ツ も 表示 す 


る (デフォルト) 

hidden 領域 指定 に し た が っ て 、 収 まり きら な い コ ン テ ン ツ は 表示 し な い 

scroll 縦横 に スク ロー ル バ ー を つけ て 、 ス クロ ー ル に よっ て すべ て の コン テン ツ を 
表示 

auto ブラ ウザ が 自動 的 に 処理 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 内 容 が あふ れ る 場合 の 処理 方 法 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
p { 
color: #008000: 
font-size: 12pt: 
font-weiqht: bold 


} 
div { 
heiqht: 50px: 
width: 150px: 
background-color: #ffff00 
} 


div.sg77p/e7 人 overflow: hidden } 
div.sg77p/e2 {overflow: scroll } 





div.sg7p/e3 {overflow: auto } 
div.sg7p/e4 {overflow: visible } 
ーー> 

</style> 

</ head> 

<bodV> 


<p>hidden 一 一 あふ れる コン テン ツ は 表示 し な い </p> 

<div class="sg77/e7"> 

<img src="birds3.jpg" width="200" height="200" at=""> 
</ diV> 

<div class="sg7p/e7"> 














overlow プロ パテ ィ は コン テン ツ が あふ れる 場合 の 処理 方 法 を 指定 し ます 。 
</div> 




















<p>scrol 一 一 スク ロー ル で すべ て を 表示 </p> 

<div class="sg/7p/e2"> 

<1mg src="birds3.jpg" width="200" height="200" alt=""> 
</div> 

<div class="sg/7p/e2"> 

overflow プロ パテ ィ は コン テン ツ が あふ れる 場合 の 処理 方 法 を 指定 し ます 。 
</div> 





























<p>auto 一 一 ブラ ウザ が 自動 処理 </p> 

<div class="sg/7p/e3"> 

<imq src="birds3.jpg" width="200" height="200" at=""> 
</div> 

<div class="sgp/e3"> 

overfow プロ パテ ィ は コン テン ツ が あれ る 場合 の 処理 方 法 を 指定 し ます 。 
</div> 


<D>visible 一 一 領域 指定 を 無視 し て すべ て 表示 </D> 

<div class="sgp/e4"> 

<img src="birds3.jpg" width="200" height="200" alt=""> 
</div> 

<div class="sg/7p/e4"> 

overlow プロ パテ ィ は コン テン ツ が あふ れる 場合 の 処理 方 法 を 指定 し ます 。 
</div> 





</bodV> 
</html> 











232 内 容 が あふ れる 場合 の 処理 方 法 を 指定 し た い 


hidden 一 - あ ふれ る コン テン ツ は 表示 し な し 


scrol 一 - ス クロ ー ル で すべ て を 表示 
内 
に MENC う 1 旨 
人 ーー トー う 
し 3 
oo 
4 > 


auto 一 一 ブラ ウザ が 自動 処理 


に 
マ 


F1 1 
2 の 


visible 一 一 領域 指定 を 無視 し て すべ て 表示 





N 











hidden 一 あふ れる コン テン ツ は 表示 し な い 


scroll 一 スク ロー ル で すべ て を 表示 


auto 一 一 プラ ウザ が 自動 処理 


visible 一 一 領域 指定 を 無視 し て すべ て 表示 





4A Netscape で は 、visible を 指定 し た 要素 が あふ 
れ て 領域 指定 を 無視 し て も 、 他 の 要素 は 本 来 の 位 
置 に 表示 され る た め 、 一 部 の 要素 が 重なる こと が 














あり ます 
1】 1 1 王寺 】 IE6 NN4 NN4.7 に に ルス 
visible し 3 O O O し 3 ペ O 
scroll メ O O O 3 3 O 
hidden に O O O メ ペ O 
auto メ O O O メ ※ O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 


人 域 の 幅 高 さ を 指定 し た い ・…・…… 
内 富 が あふれ る 場合 の 民 向 の 処理 方 法 を 指定 し た い 


内 守 が あれ る 場合 の 縮 方 向 の 処理 方 法 を 指定 し た い ・ 
スク ロー ル バ ー の 色 を 指定 し た い …・…… 
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PO5ITIONING 


overflow-x: 文 





文 *eecs キ ー ワ ー ド 





コン テン ツ が あふ れる 場合 の 横 方 向 の 処理 方 法 を 指定 し ます 。overflow プロ バテ ィ (Dp.230 参 
照 ) の バリ エー ショ ン と し て Internet Explorer が 独自 に 拡張 し た プロ パテ ィ で す 。 

た だ し 、 現 状 の Internet Explorer で は コン テン ツ が あふ れる 場合 、 標 準 で は 高 さ の 制限 
(height) を 無視 し ます 。 そ の た め 、 コ ン テ ン ツ が テキ スト で ある 場合 、 高 さ を 調整 する こと で す 
問 べ て が 表示 され て し まう の で 、overflow-x を 指定 し て も 意味 は あり ませ ん 。 サ ンプ ル で は テキ ス 

ト に 改行 不可 を 指定 し て 、 効 果 を 表現 し て いま す 。 

値 に は 以下 の キー ワー ド が あり ます 。 
visible 領域 指定 を 無視 し て 幅 を 調整 し 、 収 まり きら な い コ ン テ ン ツ も 表示 する 
hidden 領域 指定 に し た が っ て 、 収 まり きら な い コ ン テ ン ツ は 表示 し な い 


scroll 横 方 向 ハ スク ロー ル バ ー を つけ て 、 ス クロ ー ル に よっ て すべ て の コン テン ツ 
を 表示 
auto ブラ ウザ が 自動 的 に 処理 
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NAME SR P 等 MRPNS0 旨 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 内 容 が あふ れる 場合 の 横 方 向 の 処理 方 法 を 指定 し た い </Htle> 

<style type="text/css"> 


ご 1 に = 


sDan { color: #ff0000 } 
div { 

font-size:12pt: 

height: 50px: 


width: 150Dpx: 
white-space: nOWraD: 
backqround-color: #ffff00 
} 
div.sg77p/e7 {overflow-x: visible } 
div.sg77p(e2 {overflow-x: hidden } 
div.sg/7p/e3 {overflow-x: scroll } 
div.sg77p/e4 {overflow-x: auto } 
ーー テニ 
</style> 
</head> 
<bodV> 


<div> 指定 サイ ズ </div><br> 


<div class="sg7p(e7"> 

<imq src="birds3.jpg" width="200" height="200" at=""> 
</diV> 

<div class="sg77D/e7"> 

<span>overflow-x: visible</span> 一 一 領域 指定 を 無視 し て すべ て 表示 
</div> 


<br> 
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<div class="sg77p/e2"> 

<1mg src="birds3.jpg" width="200" height="200" alt=""> 
</div> 

<div class="sg/p/e2"> 

<Span>overflow-x: hidden</span> 一 あふ れる コン テン ツ は 表示 し な い 
</div> 


<br> 


<div class="sg/p/e3"> 

<img src="birds3.jpg" width="200" height="200" alt=""> 
</div> 

<div class="sg/p/e3"> 

<Span>overflow-x: scrol</span> 一 スク ロー ル で すべ て を 表示 
</div> 


<br> 





<div class="sg/7p/e4"> 

<img src="birds3.jpg" width="200" height="200" alt=""> 
</div> 

<div class="sgp/e4 "> 

<Span>overflow-x: auto</span> 一 一 ブラ ウザ が 自動 処理 

</ div> 


</bodV> 
</html> 





内 容 が あぶ れる 場合 の 横 方 向 の 処理 方 法 を 指定 し た い 








写 を 無視 し て すべ て 表示 


コン テン ツ は 表示 し な い 


EE 





4 width: 150px の 領域 指定 に 対し て 値 に 応じ た 4^ Netscape は 対応 し て いま せん 




















処理 を 行い ます 
1 1 IE5.5 1 コ : NN4 NN4.7 ド に ルコ 
visible ※ O O O ※ に メ 
scroll X O O O メ に 3 ※ 
hidden ※ O 〇 O O ※ も 3 も 3 
auto ※ 〇 O O ※ ※ ※ 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
※ Macintosh 版 IE5 は 対応 し て いま せん 
参照 内 容 領域 の 幅 と 高 さ を 指定 し た い …D.198 内 容 が あぶ れる 場合 の 終 方 向 の 処理 方 法 を 指定 し た い ‥・…・ p.238 
ザ ” 内 容 が あふ れる 場合 の 処理 方 法 を 指定 し た い ・ p.230 スク ロー ル バ ー の 色 を 指定 し た い ・・・… p.320 









POSITIONING 


overflow-V: 文 





文 *eee キ ー ワ ー ド 





コン テン ツ が あふ れる 場合 の 縦 方 向 の 処理 方 法 を 指定 し ます 。overflow プロ パティ (D.230 参 
照 ) の バリ エー ショ ン と し て Internet Explorer が 独自 に 拡張 し た プロ パテ ィ で す 。 
overflow-y は overflow-x と は 異な り 、 横 方 向 の 制限 を 無視 する こと は な い の で (画像 の 場合 
は 無視 )、 コ ン テ ン ツ が テキ スト で あっ て も 値 に 応じ た 処理 を 行い ます 。 
潮 値 に は 以下 の キー ワー ド が あり ます 。 
Visible 領域 指定 を 無視 し て 幅 を 調整 し 、 収 まり きら な い コ ン テ ン ツ も 表示 する 
hidden 領域 指定 に し た が っ て 、 収 まり きら な い コ ン テ ン ツ は 表示 し な い 


scroll 縦 方 向 の スク ロー ル バ ー を つけ て 、 ス クロ ー ル に よっ て すべ て の コン テン ツ 
を 表示 
auto ブラ ウザ が 自動 的 に 処理 


238 ある 井 の 和 の 如き を 拉 を b を uhbhbhbhthtbththththththwhwhththtwhwhwhwhwswst 
ヒレ bb ト b ト ム ト B ヘ c ペ ヨ ニ トト トート トト トト トト トト パー パパ WW 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-TVype" content="text/css"> 
<title> 内 容 が あふ れる 場合 の 縦 方 向 の 処理 方 法 を 指定 し た い </title> 
<stile type="text/css"> 
<!-- 
span { color: #ff0000 } 
div { 
font-size:16pt: 
heiqht: 50px: 
width: 150px: 
background-color: ffff00 





} 

div.sg7p/e7 { overflow-y: visible } 
div.sg7p/e2 人 { overflow-y: hidden } 
div.sg/p/e3 { overflow-y: scroll } 
div.sg/p/e4 { overflow-V: auto } 
ーー テ 

</style> 

</head> 

<bodV> 


<div> 指定 サイ ズ </div><br> 


<div class="sg7p/e7 "> 

<img src="birds3.jpg" width="200" height="200" at=""> 
</ diV> 

<div class="sg/7p/e7"> 

<Span>overflow-y: visible</Span> 一 一 領域 指定 を 無視 し て すべ て 表示 
</div> 


<br> 
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<div class="sg77p/e2"> 

<1mg src="birds3.jpg" width="200" height="200" alt=""> 
</div> 

<div class="sg/p/e2"> 

<Span>overflow-y: hidden</SDan> 一 一 あふ れる コン テン ツ は 表示 し な い 
</div> 


<br> 


<div class="sg/p/e3"> 

<1mg src="birds3.jpg" width="200" height="200" alt=""> 
</ div> 

<div class="sg77p/e3"> 

<Span>overflow-y: Scroll</sDpan> 一 一 スク ロー ル で すべ て を 表示 
</div> 

<br> 





<div class="sgp/e4"> 

<img src="birds3.jpg" width="200" height="200" alt=""> 
< / div> 

<div class="sg/7p/e4"> 

<Spanzoverflow-y: auto</span> 一 一 ブラ ウザ が 自動 処理 

</ divV> 


</bodV> 
</html> 





240 内 容 が あふ れる 場合 の 縦 方 向 の 処理 方 法 を 指定 し た い 





当 内 容 が あふ れる 
アイ ル E) 編集 


| 軸 ペー ツ が が る イタ ーネット 


人 height: 50px の 領域 指定 に 対し て 値 に 応じ た 人 Netscape は 対応 し て いま せん 


























処理 を 行い ます 
1】 1 エコ IE5.5 I NN4 ドド C 完 4 ド に ル ] 
visible メ O O O 3 ※ も 3 
scroll 3 8 O O ※ K ※ 
hidden X O O O ペ ペ X 
auto ※ O O 〇 O X ※ X 





※ 財 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
※ は Macintosh 版 IE5 は 対応 し て いま せん 





内 容 領域 の 幅 と 高 さ を 指定 し た い -………ーー…・ M 内 容 が あふ れる 場合 の 横 方 向 の 処理 方 法 を 指定 し た い 
内 容 が あふ れる 場合 の 処理 方 法 を 指定 し た い スク ロー ル バ ー の 色 を 指定 し た い ・ 








iist-stvle-type: 文 





文 *ccece キ ー ワ ー ド 





リス ト の マー ク の 種類 を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 た だ し 、list-style-image (p.246 参照 ) で 画像 が 指定 
され て いる 場合 は そちら の 設定 を 優先 し ます 。 


none マー ク な し 
disc 黒丸 (デフ ォ ル ト ) 
circle 白 丸 

リ square 四角 

し decimal 10 進 数 (1 か ら 始 まる 数 字 ) 

ト dedimal-leading-zero 0 を 頭 に つけ た 10 進数 (01.02.03,… 98,99) 
lower-roman 小文字 ロー マ 数 字 
upper-roman 大 文字 ロー マ 数 字 
lower-qreek 小文字 ギリ シア 文字 
lower-alpha 小文字 プ ヂ ル ファ ベッ ト 
lower-latin 小文字 7 ヂ ル ファ ベッ ト 
upper-alpha 大 文字 カル ファ ベッ ト 
upper-latin 大 文字 アル ファ ベッ ト 
hebrew へ ブラ イ 数 字 
armenian アル メニ ア 数 字 
georgian グル ジア 数 字 
Gik-ideographic 漠 数 字 (一 . 二 : 三 ) 
hiragana ひら が な (あい うえ お 順 ) 
katakana カタ カナ (アイ ウエ オ 順 ) 
hiragana-iroha ひら が な の いろ は (いろ は 順 ) 
katakana-iroha カタ カナ の イロ 八 (イロ 八 順 ) 


242 "お 32 
MS al 


4cjk-ideographic 


4katakana-iroha 








disc 


4 








4lower-alpha 4upper-alpha 





14 
上 


4armenian 


き 
Il 





ム hiragana-iroha 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 





<html> リ 

<head> と 4 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 4 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> リス ト の マー ク を 指定 し た い </title> 

<style type="text/css"> 

<! に > 

uLsgpfe7 {list-style-type: disc } 

ulLsgpe2 {Uist-style-type: circle } 

uLsgpie3 {list-style-type: square } 

oLsgpfe4 {list-style-type: decimal } 

oLsgpfe5 {list-style-type: lower-roman } 

oLsg/p/e6 {list-style-type: upper-roman } 

olLsgpfe7 {list-style-type: lower-alpha } 

olsgpe8 {iist-style-type: upper-alpha } 

ーー テ > 

</style> 

</head> 

<bodV> 
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<ul class="sg77p/e7"><li>disc</i><i>disc</i><Hi>disc</Hi></ul> 

<ul class="sg7p/e2"><li>circle</Hi><i>circle</Hi><Hi>circle</Hi></ul> 

<ul class="sg77p/e3"><li>square</li><li>square</Hi><li>square</i></ul> 
<ol class="sg7p/e4"><Hi>decimal</i><li>decimals/li><i>decimal</li></ol> 
<ol class="sg/7p/e5"><li>lower-roman </i><i>lower-roman</i> 
<li>lowerrroman</Hi></ol> 

<ol class="sg7p/e6"><li>upperroman</li><li>upperrroman</l> 
<li>upper-roman</Hi></ol> 

<ol class="sg7p/e7"><li>lower-alpha</li><li>lower-alpha</li> 
<li>lower-alpha</H></ol> 

<ol class="sg77p/e8"><li>upper-alpha</i><li>upper-alpha</i> 
<li>upper-alpha</li></ol> 


</body> 
際 











※ レ イア ウト の 都合 上 、 実 際 に は table タグ を 組ん で いま す が ソ ー ス は 割愛 し ます 


リリ プ 良 リス ト の マー ク を 指定 し た い - Microsoft Internet Explore 

ァ 4 プア イル (FE) 編集 E) 表示 (⑦) お気 に 入 D⑯ ツー ル D ハル プ ⑪ 

M GR の 回 還 @ の we 支 sw 人 @7o の 

* disc ocircle decimal 


* diso ocircle m SUBTB decimal 
ediso ocircle mW SUBTB decimal 


i lower-roman 1 upper-roman ョ . lower-alpha upper-alpha 
ji lower-roman II upper-roman b lower-alpha upper-alpha 
員 lower-roman 用 upper-roman c lower-alpha upper-alpha 











1. decimal 
2 decimal 
o ircle 3. decimal 


1 upper-roman A upper-alpha 
ii lower-roman IL upper-roman b lower-alpha B upper-alpha 
品 lower-roman 川 uppar-roman c lowerralpha C upper-alpha 











リス トマ ー ク を 指定 する HTML タグ を CSS に 改め る SECGECGCCCCCCCCCCCCCCCCCCCCTD 


HTML タグ で リス ト の マー ク を 指定 する に は 、 次 の よう に <ul>、<ol> また は <ll> タグ に type 属性 を 
指定 し ます 。 


<ul type="disc"> 一 </ul> <ol type=" や テー </ol> 
<ul type="square"> </u> <ol type="1">ー </o> 
<ul type="circle"> 一 </ul> <ol type="a"> ーー</ol> 


<ol type="A"> 一 </o> 


type 属性 に よっ て マー ク を 変更 する 方 法 は Deprecated (推奨 し な い ) と され て お り 、 リ スト の マー 
ク は スタ イル シー ト で 指定 する こと が 推奨 され て いま す 。 同様 の 効果 を スタ イル シー ト で 表現 する と 以下 
の よう に な り ま す 。 


ul { list-style-type: disc } ol { ist-style-type: lower-roman } 
ul { list-style-type: square } ol { tist-style-type: decimal } 
ul { list-style-type: circle } ol { list-style-type: lower-alpha } 


ol { list-style-type: upper-roman } 


CKKYYKKIIIYIIIYKILLIEKKKIRRARRRXRSKK ス NSK ス スス ミミ ミミ ミミ ミミ ミス ミミ ミミ ミミ ミミ まま ミミ ミミ ミミ ミミ ミミ ミミ ミミ よ よ ええ 】 


1 エ 】 IE5.5 1 コガ NN4 EC 守 4 が: ルコ 
disc 








Gircle 





square 





decimal 





decimaLleading-zero 





lower-roman 





OIOl xIOIOIOIO 
OIO| xIOIOIOIO 


upper-roman 





lower-greek 





〇 | X 


lower-alpha 
lower-latin 
upper-alpha 
upper-latin 














hebrew 





armenian 





georgian 
cjk-ideographic 








hiragana 





katakana 





hiraqana-iroha 


XIXIXIXIXIXIXIXIXIOIXIOIX 





katakana-iroha 





olxlxlxlxlxlxlxlxlxlolx|ol x|olol x|oIo|O|G 賠 
OlxlxlxlxlxlxlxlxlxIOlxIOlxIOIOlxIOIOIOIO 
XlxlxlxlxlxlxIxlxlxIOlxIOlxIOIOIxIOIOIOIO 
OlxlxlxlxlxlxlxlxlxIOlxIOlxIOIOlxIOIOIOIO 


OQIOIOIOIOIOIOIOIOIOIOIOIOIOIOIOIOIOIOIOIO 


OIXIXIXIXIXIXIXIXIxIO|Ix 


none O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
※ Macintosh 版 N6.2 は hebrew、armenian、georgian に は 対応 し て いま せん 





参照 リス ト の マー ク に 画像 を 使用 し た い ・……・……・…・ p.246 リス ト の マー ク を 一 括 し て 指定 し た い ………・…… p.250 
塊 デ デリ スト の マー ク の 配置 を 指定 し た い ……………・ p.248 





iist-style-imaqe: 文 





大 eeeeeeURL 
キー ワー ド 





リス ト の マー ク と し て 表示 させ る 画像 を 指定 し ます 。 

値 に は 次 の よう な 指定 方 法 が あり ます 。 な お 、list-style-type (p.242 参照 ) と 同時 に 設定 さ 
れ て いる 場合 に は 、list-style-image の 指定 が 優先 され 、 指 定 さ れ た 画像 ファ イル が 見 つか ら な 
か っ た 場合 に list-style-type の 指定 が 適用 され ます 。 


URL 
tist-style-image: url(" 区 ") 広 …… 画 像 ファ イル の URL 
表示 させ る 画像 ファ イル の URL を 上 記 の 形式 で 指定 し ます 。 
HTML 文書 か ら 外部 の スタ イル シー ト を 読み 込 お 場合 は HTML 文書 か ら の 相対 URL で は な 
く 、 ス タイ ルフ ァイル か ら の 相対 URL で 指定 し な く て は な り ま せん (Dp.50 参照 )。 


レル トー 


キー ワー ド 
none 画像 を 表示 し な い (デフ ォ ル ト ) 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 


<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> リス ト の マー ク に 画像 を 使用 し た い </title> 


<stvle type="text/css"> 

<!-- 

uL { iist-style-image: url("ball_red.qif") } 
ii.D//e { iist-style-image: url("balL blue.gif") } 
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ーー> 

</style> 

</head> 

<bodV> 

<ul> 
<li> リス ト の マー ク に 画像 を 使用 </H> 
<li> リス ト の マー ク に 画像 を 使用 </l> 
<li class="5//e"> リス ト の マー ク に 画像 を 使用 </li> 

</ul> 

</bodV> 

</htm> 











当 リス ト の マー ク に 画像 を 使用 し た い - Micro 回 IE 


アイ ル ( 編集 表示 お 気 に AO⑩ ウー” 講 


京 ・ の 回 回 ” 2 ァ FLA 


リス メト の マ 


リスト の マー ク に 画像 を 使用 
リス ト の マー ク に 画像 を 使用 


we リス ト の マー ク に 画像 を 使用 
w リス ト の マー ク に 画像 を 使用 


る リス ト の マー ク に 還 像 を 使用 リス ト の マー ク ( に 画像 を 使用 














1】 1 ヨコ 1 三 - 基 -】 IE6 NN4 ドド し 守 4 に ルス 
URL O O O O ペ ペ O 
none O O O O X メ O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
門間 め 。 リ スト の マー ク を 指定 し た い ……・ い ーーー…… p.242 リス ト の マー ク を 一 括 し て 指定 し た い ……………… p250 
デ リス ト の マー ク の 配置 を 指定 し た い …………ー…ーー p248 
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iist-style-position: 文 





文 *eee キ ー ワ ー ド 





リス ト の マー ク を リス ト の 項目 の 表示 領域 の 外側 に 置く か 、 内 側 に 置く か を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 

outside マー ク を 項目 の 外側 に 配置 (デフ ォ ル ト ) 

inside マー ク を 項目 の 内 側 に 配置 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> リス ト の マー ク の 配置 を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

ul# 罰 { Hst-style-position: inside } 

ul#ou7 { ist-style-position: outside } 

ーー テ 

</style> 

</head> 

<bodV> 

<ul id=" 罰 "> 
<li>list-style-position: inside を 指定 <br> 項目 の 表示 領域 内 に マー ク が 配置 され ます 。</i> 
<li>list-style-position: inside を 指定 <br> 項目 の 表示 領域 内 に マー ク が 配置 され ます 。</1> 

</ul> 


テニ 











<ul id="o/f"> 
<li>list-stye-position: outside を 指定 <br> 頂 目 の 表 示 人 域 の 外側 に マー ク が 配置 され ます 。 </li> 
<li>list-style-position: outside を 指定 <br> 項目 の 表示 儲 域 の 外側 こ マ ー ク が 配置 され ます 。 </ ll> 
</ul> 
</body> 
</html> 





ヨリ スト の マー ク の 配置 を 指定 し た い 


!。 jist-style-position- inside を 指定 

! 項 目 の 表示 領 域内 に マー ク が 配置 され ます . 
記 ist-style-position_ insl 

i 頂 目 の 表示 領 域内 に マー ク が 配置 され ます 。 


<iist-style-position outside を 指定 
項目 の 表示 領域 の 外側 に マー ク が 配置 され ます . 


| ist-style-position: outsi 
』 頂 目 の 表 示 領 域 の 外側 に マー ク が 配置 され ます 。 





!。 ist-style-position inside を 指定 
1 項目 の 表示 領域 内 に マー ク カ 


! 項 目 の 表示 入内 に マー ク が 配置 され ます 。 


名 の 


I outside を 指定 
! 項 目 の 表示 領域 の 外側 に マー ク が 配置 され ます 。 


al 5 














1】 1 三 】 1 王 -] 1 ミコ NN4 NN4.7 に ルコ 
jnside ぐ 】 O O O 3 ※ O 
outside 〇 O O O 2 し 3 O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ます 
参照 リス ト の マー ク を 指定 し た い ・………・…… …""pD.248 リス ト の マー ク を 一 括 し て 指定 し た い …・…・・…・ p.250 
デリ スト の マー ク に 画像 を 使用 し た い "pg46 
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iist-stvle: 丸 人 





文 *eeeelist-style-type の 値 (リス トマ ー ク の 種類 ) 
*iist-style-imaqe の 値 (リス トマ ー ク の 画像 ) 
へ *eeeelist-style-position の 値 (リス トマ ー ク の 配置 ) 





リス ト の マー ク に 関す る 各種 指定 を まとめ て 設定 し ます 。 
liSt-style-type (種類 )、list-style-image (画像 )、list-style-position (配置 ) の うち 必要 
な 値 を 任意 の 順番 で 並べ 、 半 角 ス ペー ス で 区 切っ て 指定 し ます 。 省略 され た 値 に つい て は デフ ォ 


ルト の 設定 が 適用 され ます 。 
また 、list-style プロ パテ ィ の 値 に none を 指定 する と 、list-style-type と list-style-image 
の 両方 の 値 が none に 設定 され 、 結 果 と し て マー カー が 表示 され な く な り ま す 。 


ルト ー 








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_J1S"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> リス ト の マー ク を 一 括 し て 指定 し た い </title> 
<style type="text/css"> 
<!-- 
uL { marqin: 20px auto } 
ulLsg7pfe7 {list-style: urL("ball_red.qif") disc outside } 
ulLsg7p/e2 人 { 
list-style-image: none: 
list-style: square inside 


} 

.S077D/63 { 
color: #ff3300: 
font-weight: bold 

} 

.S077D/e4 { font-weiqht: bold } 

== テ 

</stvle> 

</head> 

<body> 


<ul class="sg77p/e7"> 
<li> 
<Span class="sg/p/e3"> リス ト の マー ク に 画像 を 使用 する に は ? </span> …… リ 
スト の マー ク 記 号 や 数 字 で は な く 、 画 像 を list-style-image プロ パテ ィ を 利用 し ます 。 値 
の 指定 方 法 は 次 の よう に な り ま す 。 
</> 
<ul class="sg/7p/e2"> 























<li> 

<span class="sg/7p/e4 ">URL</span><br>list-style-image:url(" 京 ) の か た ち で 表 
示さ せる 画像 ファ イル の URL を 指定 し ます 。 

</H> 


リス ト の マー ク を 一 括 し て 指定 し た い 





テニ 





レル トー 
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<li> 
<Span class="sg/7p/e4">none</span><br> 画像 を 表示 し ませ ん 。 デ フォ ルト 
の 値 で す 。 
</l> 
</ul> 
<li> 
<Span class="sg7p/e3"> リス ト の マー ク の 配置 を 指定 する に は ? </span> …… 
list-style-position を 利用 し ます 。 値 に は 以下 の キー ワー ド を 指定 し ます 。 
</i> 
<ul class="sg7p/e2"> 


<li> 














<SPan class="sg77p/e4">outside</span><br> マー ク を 項目 を 外側 に 配置 。 デフ 
ォ ル ト の 値 で す 。 
</li> 


<li> 























<Span class="sg/7p/e4 ">inside</sDan><br> マー ク は 項目 を 内 側 に 配置 。 
</l> 
</ul> 
</ul> 
</bodV> 
</html> 





リス ト の マー ク を 一 括 し て 指定 し た い 








@* ま の 回 回 @ の * 
@ リ スト の マー ク に 画像 を 使用 する に は ? …… リ スト の マー ク 記 号 や 数 字 で は な く 、 
画像 を list-style-image プ ロ パ ティ を 利用 し ます 。 値 の 指定 方 法 は 次 の よう に な り ま 
す 。 


m URL 

list-style-imagerur(“ 次 ) の か た ち で 表示 させ る 画像 ファ イル の URL を 指定 し ま 
k 朋 

mw POTIG 

画像 を 表示 し ませ ん 。 デフ ォ ル ト の 値 で す 。 


@ リ スト の マー ク の 配置 を 指定 する に は ? ……list-style-position を 利用 し ます 。 値 に 
は 以下 の キー ワー ド を 指定 し ます 。 


m outside 


マー ク を 項目 を 外側 に 配置 . デフ ォ ル ト の 値 で す 。 
minSide 
マー ク は 項目 を 内 側 に 配置 。 











e リス ト の マー ク に 画像 を 使用 する に は ? …… リ スト の マー ク 記 号 や 数 字 で は な く 、 画像 を 
list-style-imags プ ロ パ ティ を 利用 し ます . 値 の 指定 方 法 は 次 の よう に な り ま す 。 





s ュ URL 

list-style-imags'ur(“ ) の か た ち で 表示 させ る 画像 ファ イル の URL を 指定 し ます 。 
ュ 

画像 を 表示 し ませ ん . デフ ォ ルト の 値 で す 。 


e リス ト の マー ク の 配置 を 指定 する に は ? ……list-style-position を 利用 し ます 。 値 に は 以下 
の キー ワー ド を 指定 し ます 。 


mw Outside 
マー ク を を 條 介 に 配 軒 デフ ォ ルド の 人 です 
マー ク は 項目 を 内 側 に 配置 。 











1 1 二 】 IE5.5 1 ココ NN4 NN4.7 に ルオ 
O O O O 人 41 人 O 
* 1 : liSt-style-type の 値 の み 有 効 で す 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


本 他 リス ト の マー ク を 指定 し た い ………ー い いこ ーー p242 
5 リス ト の マー ク に 画像 を 使用 し た い 





リス ト の マー ク の 配置 を 指定 し た い ………………・…・ p. ら 48 









に | 


table-Iayout: 太 





文 *eeeces キ ー ワ ー ド 





テー ブル を どの よう に 表示 する か を 指定 し ます 。 
通常 テー ブル は テー ブル 全体 の デー タ を 読み 込ん で か ら 表 示 が 始ま り ま す が 、 table-layout ブ 
ロ パ ティ で は 最初 の 横 一 列 分 の デー タ を 読み 込ん だ 時 点 で レイ アウ ト を 決定 し て 表示 を 始め る よ 
う 指定 する こと が で きま す 。 結果 と し て 表 の 表示 速度 を 速め る こと が で きま す 。 
値 に は 以下 の キー ワー ド が あり ます 。 
fixed テー ブル の 最初 の 横 一 列 目 の デ ー タ を 読み 込ん だ 時 点 で セル 幅 を 計算 し て 表 
示 。width プロ パテ ィ に よっ て あら か じ め セ ル 幅 が 指定 され て いな い 場 合 
(width: auto の 場合 ) に は 、 セ ル 幅 は 均等 に な る 
auto テー ブル 全体 を 読み 込ん で か ら セ ル 幅 を 計算 し て 表示 (デフ ォ ル ト ) 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_J1S"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> テー ブル の 表示 方 法 を 指定 し た い </title> 
<stvle type="text/css"> 
<!-ー 
table.sg7p/e7 { table-layout: fixed } 
table.sg7p/e2 { table-layout: auto } 
td.sg7p/e3 {width: 130px } 
caption { 
font-weiqht: bold: 
color: #6633ff 





} 

table,th,td {border: 2px sohid } 

div { margin-bottom: 30px } 
ーー テ > 

</style> 

</head> 

<body> 


に さい 「[ 


<diV> 
<table class="sgp/e7"> 
<caption>table-layout: fxed</caption> 
<t『> 
<td class="sg77p/e3"> アロ マセ ラ ピ ー </td> 
<td> 芳香 植物 か ら 抽出 し た エッ セン シャ ルオ イル (精油 ) を 使い 、 心 と 体 を ケア す 
る 自然 療法 </td> 
<td> 体験 講座 あり </td> 
</tr> 
<tr> 
<td> カリ グラ フィ ー </td> 
<td> アル ファ ベッ ト の 書道 。 西洋 書道 と も 呼ば れる 。</td> 
<td> 作品 展開 催 中 </td> 
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</tr> 
<tr> 
<td> 俳句 </td> 
<td> 五 七 五 の 三 句 、 計 十 七 文字 の 定型 か ら 成り 、 季 語 を 含む お こと を 約束 と する 日 本 
独特 の 短 詩 型 文芸 の こと 。</td> 
<td> 作品 展開 催 中 </td> 
</tr> 
</table> 
</div> 
<diV> 
<table class="sg7p/e2"> 
<caption>table-layout: auto</caption> 
<tr> 
<td class="sg7p/e3"> アロ マセ ラビ ピー </td> 
<td> 芳香 植物 か ら 抽 出し た エッ セン シャ ルオ イル (精油 ) を 使い 、 心 と 体 を ケア す 
る 自然 療法 </td> 
<td> 体験 講座 あり </td> 
</tr> 
<tr> 
<td> カリ グラ フィ ー </td> 
<td> アル ファ ベッ ト の 書道 。 西洋 書道 と も 呼ば れる 。</td> 
<td> 作品 展開 催 中 </td> 
</tr> 
<tr> 
<td> 俳句 </td> 
<td> 五 七 五 の 三 句 、 計 十 七 文字 の 定型 か ら 成 り 、 季 語 を 含む こと を 約束 と する 日 本 
独特 の 短 詩 型 文芸 の こと 。</td> 
<td> 作品 展開 催 中 </td> 
</tr> 
</table> 
</div> 
</bodV> 
</htm> 








テー ブル の 表示 方 法 を 指定 し た い 








table-layout_ fixed 


アロ マセ ラビ 芳香 植物 か ら 抽 出し た エッ セン シャ ルオ イル 


カリ グラ フィ ー 


俳句 


俳句 


( 策 油 ) を 使い 心 と 体 を ケア する 自然 療法 『* 座 あり 
Eo) 西洋 書道 と も 呼ば れ 作品 展開 催 中 
五 五 の 三 句 、 計 二 七 文 字 の 定型 か ら 成り 、 


季語 を 含む こと を 約束 と する 日 本 独特 の 短 詩 作品 展開 催 中 
型 文芸 の こと 。 


table-layout auto 


隊 芳香 植物 か ら 抽出 し た エッ セン シャ ルオ イル (精油) を 使い 、 心 体 を ケア する 体験 講座 
アロ マセ ラビ ー 自然 療 法 あり 
カリ グラ フィ ー アル ファ ベッ ト の 書道. 西洋 書道 と も 呼ば れる 。 了 有 


五 七 五 の 三 句 、 計 十 七 文字 の 定型 か ら 成り . 季語 を 含む こと を 約束 と する 日 本 作品 展開 
独特 の 短 詩 型 文芸 の こと 。 催 中 











4A Netscape は 対応 し て いま せん 








1 1 IE5.5 1 ココ NN4 ドド 4 ド に に ルコ 
fixed X O O O メ メ ※ 
auto ※ O O O 96 X ※ 





※ Macintosh 版 IE5 は 対応 し て いま せん 
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ーー トー ニー ーー ーー ーー ーー ーーー ーーーーーーーー- 


に に ビ い に 「 


caption-side: 文 





支 eeeeee キ ー ワ ー ド 





キャ プシ ョ ン (タイ トル ) の 表示 され る 位置 を 指定 し ます 。 

値 に は 以下 ひ O キ ー ワ ー ド が あり ます 。 
top テー ブル の 上 部 に キャ プシ ョ ン を 表示 (デフ ォ ル ト ) 
bottom テー ブル の 下部 に キャ プシ ョ ン を 表示 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> キャ プシ ョ ン の 位置 を 指定 し た い </title> 

<stvle type="text/css"> 


に に 


caption { 
font-weight: bold: 
color: #6633ff 

} 


caption#Sg77p/e7 { caption-side: top } 
caption#Sg/7p/e2 { caption-side: bottom } 








table,th,td { border: 2px solid } 
div { marqin:20px } 

ーー テ 

</style> 

</head> 
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<bodV> 
<diV> 
<table> 
<caption id="sgp/e7 ">caption-side: top</caption> 
<tr><th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td><td> 基礎 クラ ス </td> <td> 募集 中 </td></tr> 
</table> 





</div> 

<diV> 

<table> 
<caption id="sg77p/e2">caption-side: bottom</caption> 
<tr> <th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 

</table> 

</div> 

</ bodV> 

</html> 











キャ プシ ョ ン の 位置 を 指定 し た い 
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caption-side- top 
曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 


caption-side- bottom 
曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 


ギン ] 
caption-side. bottom 





人 人 Internet Explorer は 対応 し て いま せん 





キャ プシ ョ ン 位 置 を 指定 する HTML タグ を CSS に 改め る SEEESSE PP 


HTML タグ で キャ プシ ョ ン の 位置 を 指定 する に は 、 次 の よう に <caption> タグ に align 属性 を 指定 し ま 
す 。 
<caption align="top"> </caption> 
<caption align="bottom"> 一 </caption> 


<caption> タグ の align 属性 は Deprecated ( 推 彰 し な い ) と され て お り 、 キ ャ プシ ョ ン の 位置 は スタ イル 
シー ト で 指定 する こと が 推奨 され て いま す 。 同 様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り 
ます 。 
caption { caption-side: top } 
caption { caption-side: bottom } 


で コー 


OKARASKRRNRRRRRRRRRXKKYRIKRRXXYRRNYO DOOLDCCLLEKELLYKET) COCCOEEEYTO 





1 1 1 王 誠 ) 1 ヨゴ NN4 ドド C 完 4 に ル 
top ※ ※ ※ ※ ※ ※ OO 
bottom に も 3 メ ※ 3 メ O 
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border-collapse: 文 





文 *ecees キ ー ワ ー ド 





表 の 外 枠 や セル の 枠 線 の 表示 方 法 を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 
collapse 隣り 合う セル の 枠 線 を 重ね て 表示 する 
separate 隣り 合う セル の 枠 線 を 分 離さ せ て 表示 する (デフ ォ ル ト ) 


な お 、border-collapse プロ パテ ィ の 値 に collapse を 指定 する こと で 形式 の 異な る 枠 線 が 重 
な っ た 場合 の 優先 順位 は 次 の よう に な り ま す 。 
1. border-style: hidden が 指定 され た も の が も っ と も 優先 され る 
2. border-style: none が 指定 され た も の は も っ と も 優先 度 が 低い 
3. hidden と none 以外 の 値 が 指定 され て いる 場合 は 、 よ り 幅 が 太い 枠 線 が 優先 され る 
4. 太 さ も 同じ 場合 は 、 枠 線 の 種類 に より 以下 の よう な 優先 度 に な る 
double > solid > dashed > dotted > ridge > autoset > groove > inset 
5. 色 (border-color) だ けが 異な る 場合 は 、 以 下 の よ うな 優先 度 に な る 
th 要素 ・td 要素 tr 要素 > thead 要素 ・ Dody 要素 ・ tfoot 要素 col 要素 > colgroup 要素 table 要素 


に に [| 


羽村 詞 問 
政 … は 主計 束 





th,td 要 素 tr 要素 thead,tbody,tfoot 要 素 col 要 素 colgroup 要 素 table 要 素 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 枠 線 の 表示 形式 を 指定 し た い </ せ tle> 
<style type="text/css"> 
<!-- 
table.sg7pfe7 {border-collapse: collapse } 
table.sg7p/e2 {border-collapse: separate } 
table,th,td { border: 3px solid #ff0066 } 
caption { 
font-weight: bold: 
color: #6633ff 





} 
div { margin-bottom: 30px } 
</style> 
テ </head> 
」 
ル <body> 
<div> 





<table class="sg7p/e7 "> 
<caption>border-collapse: colapse</caption> 
<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
</table> 
</ diV> 


<div> 
<table class= "sg7p/e2"> 
<caption>border-collapse: separate</caption> 
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<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 


<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
</table> 
</div> 
</bodV> 
</htm に > 














border-collapse 


collapse 
星 日 | クラス | 状況 | 
EEE 


border-collapse. separate 





に に らい 「 


人 人 Netscape は 対応 し て いま せん 














1 1 1 王 た 】 IE6 NN4 NN4.7 ド に ルコ 
collapse X O 〇 O 〇 ※ ※ ※ 
separate し 3 O 〇 O O O 2 ※ ※ 

※ Macintosh 版 IE5 は 対応 し て いま せん 
参 昭 枠 線 を 一 括 し て 指定 し た い …… パ (バド ド ドド p.195 
"セル の 間隔 を 指定 し た い …………… rr p.264 





border-spacind: 文 上 下 左右 同じ 
border-spacind: 文 文 左右 、 上 下 





大 ww…… サ イズ を 表す 数 値 単位 





セル の 枠 線 と 枠 線 の 間隔 を 指定 し ます 。 

値 が 1 つ だ け の 場合 は 上 下 左右 に 同じ 間隔 が 適用 され 、2 個 の 値 を 半角 スペ ー ス で 区 切っ て 並 
べた 場合 に は 前 の 値 が 左右 の 間隔 に 、 後 ろ の 値 が 上 下 の 間 隔 に 適用 され ます 。 

な お 、border-SDacin9 プロ バテ ィ の 指定 を 有効 に すけ る に は 、border-collapse プロ パテ ィ の 
値 が separate (border-collapse:separate/ デ フォ ルト ) に な っ て いる 必要 が あり ます 。 
border-collapse:collapse が 指定 され て いる 場合 、Dorder-spacing の 指定 は 無効 に な り ま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> セル の 間隔 を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

table.sample1 {border-spacing: 5px } 

table.sample2 {border-spacing: 5px 20px } 

table,th,td { border: 3px soid #ff0066 } 


に LU 





caption { 
font-weight: bold: 
color: #6633ff 
} 
div { margin-bottom: 30px } 
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</style> 
</head> 


<body> 


<diV> 
<table class="sgp/e7"> 
<caption>5px</caption> 
<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
</table> 
</div> 

















<div> 
<table class="sgp/e2"> 
<caption>5px 20px</caption> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
</table> 
</div> 

















</body> 


</htm に > 








セル の 間隔 を 指定 し た い 


に に い [ 
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嘩 日 | 2 ラス | 状況 」 


陣 玉 匿 礎 2 ラ ス 1 箕 中 _] 


sk 








AInternet Explorer は 対応 し て いま せん 





ii ヌ ュ ォ ヨネ ヨネ ヨネ nx ヨ 』x』x』 ゲ うう 


HTML タグ で セル の 間隔 を 調整 する に は 、 次 の よう に <table> タグ に cellspacind 属性 を 指定 し ます 。 
<table cellspacing=" 太 "> </table> ( 廊 一 間隔 の 値 ) 


同様 の 効果 を スタ イル シー ト で 表現 する と 以下 の よう に な り ま す 。 





Pa table { border-spacing: 超 Dx ( 娘 一 間隔 の 値 ) 
デ に まま まま まま スミ トミ スミ まま ミニ ミス ミニ ミオ ミミ スミ スミ ミス ミミ ニス スミ ミス ミス ミミ スミス スミ スニ スト ミス ミス スニ スス スミス まま まま まま 】 
| 
ブ 
ル 
1 | IE5.5 1 NN4 ドド し 守 4 に ル 4 
サイ ズ 3 メ 3 メ X x O 
要 線 の 表示 形式 を 指定 し た い ・…… バ ーー p261 
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emptV-cells: 文 





支 *eeeee キ ー ワ ー ド 





空 セ ル の 枠 線 の 表示 ・ 非 表示 を 指定 し ます 。 こ の 場合 の 「 空 の セル 」 と は 、 要 素 内 容 が 空 の セ 
ル (デー タ が 入っ て いな い セ ル ) だ け で な く 、visibility プロ パテ ィ (p.206 参照 ) の 値 に 
hidden が 指定 され て いる セル も 含み ます 。 

値 に は 以下 の キー ワー ド が あり ます 。 

hide 空 セ ル の 枠 線 を 表示 し な い (デフ ォ ル ト ) 
show 空 セ ル の 枠 線 を 表示 する 

な お 、empty-cellIS プロ パテ ィ の 指定 を 有効 に ける に は 、border-collapse プロ パテ ィ の 値 が 
separate (border-collapse:separate/ デ フォ ルト ) に な っ て いる 必要 が あり ます 。border- 
collapse:collapse が 指定 され て いる 場合 、empty-cells の 指定 は 無効 と な り ま す 。 





指定 し た い 


で 一 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 

<meta http-equiv="Content-Style-TVpe" content="text/css"> 

<title> 空 セ ル の 枠 線 の 表示 方 法 を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

td.sg77p/e7 {empty-cells: hide } 

td.sg7p/e2 {empty-cells: show } 

tableth,td {border: 3px soliid ff0066 } 

ーー テ 

</style> 

</head> 

<body> 

<table cellspacing="10" cellpadding="10"> 
<tr><td> アロ マセ ラビ ピー </td><td class= "sg7p/e7"></td></tr> 
<tr><td class="sg7p/e2"></td><td> カリ グラ フィ ー </td></tr> 














テ </table> 
』 </body> 
ル </htm> 
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当 空 セル の 枠 の 表示 方 法 を 指定 し た い - Microsoft Internet Explorer 








4 Internet Explorer は 対応 し て いま せん 





INI N 空 セ ル 0 梓 線 の 表示 方 法 を 指定 し た い - Netscape 6 











で ぞい! 一員 


4 empty-cellS:Show を 指定 する と 空 の セル の 枠 線 も 表示 され ます 


すべ て の セル に 枠 線 を 表示 する に は SCCCCCCCCCCCCCCCCCFTTKYYCCTCTEKYYLKCUTLCTYYD 


table { empty-cells: show } と 指定 する と 、 値 が 継承 され て すべ て の セル の 周囲 に 枠 線 が 表示 され る よ 
うに な り ま す 。 


TTPTTTTTTTTEECECYKKKKKLLLLLKRKLLLLLLLLXRRARRRRARRLALLAKKKRXKKKKKKKKXKKKKK テ KKK メ メメ 】 








IE! IE5 IE5.5 上 3 NN4 NN4.7 。 NG6.2 
hide ※ 2 KS ※ ※ に < O 
show ※ ※ X ※ ※ ※ ① 
※ 骨 用 する セレ クタ に よっ て も 効果 が 変わ り ます 

枠 線 の 表示 形式 を 指定 し た いい の ー pe1 
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FILTER 同 





フィ ル タ と は 、Internet Explorer が 独自 に 拡張 し た Web ペー ジ 上 で 視覚 的 な 効果 を 表現 する 
機能 の こと で 、 ス タイ ル シ ー ト を 利用 し て 定型 の 書式 を 記述 する こと で 、 画 像 や テキ スト に 特殊 
効果 を 設定 する こと が で きま す 。 Internet Explorer 4.0 以上 の ブラ ウザ で 表示 可能 な フィ ル タ と 、 
DirectX を 必要 と し Internet Explorer 5.5 以上 の ブラ ウザ で 表示 可能 な フィ ル タ と が あり ます 
が 、 い ずれ も Windows 版 の Internet Explorer で の み 動作 し ます 。 


DirectX と は Microsoft が 開発 し た 、Windows 環境 で マル チ メ デ ィ ア 機能 を 強化 する た め の 
技術 の 総称 で す 。 こ の 技術 に より グラ フィ ックス 描画 や 音声 の 処理 な ど マ シン パワー を 必要 と す 
る 処理 が 、 快 適 で 高 速 に 実現 で きる よう に な り ま す 。Windows 98 か ら は 標準 で 搭載 され る よう 
に な っ て いま す が 、 Microsoft 社 の サイ ト か ら ダ ウン ロー ド す る な ど し て 入手 する こと も 可能 で す 。 


@ Internet Explorer 5.5 以上 の 場合 の 基本 書式 


Internet Explorer 5.5 以上 の 場合 、 利 用 で きる フィ ル タ の 基本 的 な 書式 は 以下 ひよ うに な り ま 
す 。 た だ し 、 こ れ ら の フィ ル タ を 動作 させ る た め に は 、Windows に DirectX が イン スト ー ル さ 
れ て いる 必要 が あり ます 。 


に filterxprogid:DXImageTransform.Microsoft.x() 
ルケ  …… フ ィ ル タ 名 
 …… プ ロ パ ティ 


「fiter:progid:DXImageTransform.Microsoft.」 に つづ け て 設定 し た い フ ィ ル タ 名 を 、 (0 内 
に は 各 プ ロ パ ティ と その 値 を 記述 し ます 。 








@ Internet Explorer 4.0 以上 の 場合 の 基本 書式 


Internet Explorer 4.0 以上 で 利用 で きる フィ ル タ の 基本 的 な 書式 は 以下 の よう に な り ま す 。 


filter: 誠 ( 広 ) 
 …… フ ィ ル タ 名 
ss プロ パテ ィ 


「filter:] に つづ け て フィ ル タ 名 を 、(0 内 に は 各 プ ロ パ ティ と その 値 を 記述 し ます 。 


⑯ フィ ル タ の 設定 方 法 


フィ ル タ の 設定 は 、 他 の スタ イル と 同様 に 行い ます 。 

次 の 例 で は 、 そ れ ぞ れ style 属性 と style 要素 を 利用 し て 画像 に MotionBlur フィ ル タ を 設定 し 
て いま す (MotionBlur フィ ル タ は IE 5.5 以上 で 利用 可能 )。MotionBlur フィ ル タ に つい て は 
p.295 を 参照 し こく だ さい 。 


<img src="sample.jpg" 
style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50) 
width=50%"> 


<style type="text/css"> 

imq { 
filterxprogid:DXImageTransform.Microsoft.MotionBlur(strength=50) 

} 

</style> 


フィ ル タ は embed、applet、select、option、tr、thead、tbody、tfoot の 加 要 素 を の ぞ 
く ほ ぼ す べ て の 要素 に 指定 する こと が で きま す 。 た だ し 、 こ れ ら の フィ ル タ を 適用 する に は 要素 
に 対し て position プロ パテ ィ で absolute を 指定 する か 、width プロ バテ ィ や height プロ パテ 
ィ を 設定 し て 表示 位置 を 指定 する な どの 必要 が あり ます の で 注意 し て くだ さい 。 また 、 フ ィ ル タ 
に よっ て は ボッ クス を 変形 させ て 効果 を 表現 する た め 、 そ の 分 の 領域 も 考慮 し た うえ で 要素 の 位 
置 や サイ ズ を 指定 し て お か ね ば な り ま せん 。 各 フ ィ ル タ の 性 質 を 理解 し た うえ で ペー ジ の レイ ア 
ウト を 行う こと が 重要 で す 。 


画像 や テキ スト に 表示 効果 を つけ た い 





に て - と くさ | 
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に て - ド | 
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⑱ フィ ル タ の 対応 


仕様 で は さま ざま な 効果 の フィ ル タ が 定義 され て いま す が 、 本 書 で は 以下 の フィ ル タ を 取り 上 
げ ま す 。 


Alpha O O ) p.273 





水 す べ て Windows 版 Internet Explorer の み の 対応 と な り ま す 


FILTER 


filterxprogid:DXImageTransform.Microsoft.Alpha( 文 ) IiEe.sgt) 
filteralpha( 文 ) tiE4.0E) 





大 ee プロ パテ ィ 


半 透 明 の フィ ル タ を かけ ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 


opacity スタ ー ト 地点 の 不透明 度 (0 一 100) 

finishopacity 終了 地点 の 不透明 度 (0 一 100) 

style フィ ル タ の 種類 (0 一 3) 

startx スタ ー ト 地点 の X 座 標 

starty スタ ー ト 地点 の Y 座標 

finishx 終了 地点 の X 座 標 

finishy 終了 地点 の Y 座標 

enabled フィ ル タ を 実行 する か どう か (true、false また は 1、0) 


opacity と finishopacity で 指定 する 不透明 度 は 、 透 明 の 0 か ら 不透明 の 100 まで の 範囲 で 整 
数 値 で 指定 し ます 。 

style は フィ ル タ の 種類 を 指定 し ます 。0 は 単 一 (グラ デー ショ ン に な り ま せん )、1 は 扇状 、2 
は 放射 線 状 、3 は 長方形 に 半 透 明 処 理 を 行い ます 。1 一 3 を 指定 し た 場合 は 、 ス ター ト 地 点 と 終了 
地点 の 座標 に し た が っ て グラ デー ショ ン が 形成 され ます 。 

startx と starty は スタ ー ト 地点 、finishx と finishy は 終了 地点 の 座標 を 、 そ れ ぞ れ 要 素 の 幅 ま 
た は 高 さ の 割合 で 指定 し ます 。 デ フォ ルト の 値 は 0 で す 。 

finishopacity、startx、starty、finishx、finishy は style=1 の 場合 に の み 適 用 され ます 。 

enabled で は 、 フ ィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル 
タタ を 実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 








いと すく | 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 半 透 明 の フィ ル タ を か けた い </ せ title> 

<style type="text/css"> 

<!-- 

・S77//e { 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, 
finishopacity=0,stle=1.startx=0,starty=0,finishx=100,finishy=100) 


} 

body { margin: 0 } 

div { 
width: 250px: 
height: 280px: 
text-align: center: 
position: absolute: 
top: 20Dx: 
left: 20px 

} 

p { 

も width: 200px: 
3 margin: 15px auto: 

font: bold 1.3em AriaLHelvetica,sans-serif: 
background-color: #ff6633 

} 

ー テ > 

</style> 

</head> 

<body> 


<div class="sg/7p/e"> 
<D>Alpha Fiter</D> 
<img src="bird.jpg" alt="" width="200" height="200"> 
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IE4.0 以上 の ブラ ウザ で の 指定 方 法 RCCCCCCCCCCYYLYKYYYLLLLCTTTLYTYLKY て KK 


IE4.0 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設 定 方 法 は Alpha を 
指定 し た 場合 と 同じ で す 。 


.5sample { 
filter:alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=100,finishy=100) 


伴い 


} 


POLYIIIIIRRRIRRKRLARKALLRRRRKRNKRRRRRRRRRKLLLLIRNLANNAAAYLAALNNAAAAIIIMIXIRRNY 
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FIITER 


filterxprogid:DXImageTransform.Microsoft.Blur( 文 ) (iEs.su 





大 ee プロ パテ ィ 





文字 や 画像 を ぼかし た よう に 表示 し ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 


makeshadow 影 と し て 表示 する か どう か (true、false も し く は 1、0) 
pixelradius ぼかし の 量 (0 一 100) 

shadowopacity ぼかし の 濃度 (0.0 一 1.0) 

enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


makeshadow は 要素 を 影 と し て 表示 する か どう か を 指定 し ます 。 true (表示 する ) を 指定 す 
る と 、 要 素 は 黒 で 表示 され ます 。 デ フォ ルト は false (表示 し な い ) で す 。 

pixelradius は ぼかし の 効果 が 表示 され る 領域 を 0 - 100 の 範囲 で 指定 し ます 。 大 き な 値 を 指 
定 する と 効果 を 表示 する た め に 必要 な ボッ クス 領域 も 大 きく な る た め 、 サ イズ 指定 や レイ アウ ト 
に 注意 が 必要 で す 。 デ フォ ルト の 値 は 2 で す 。 

Shadowopacity は ぼかし の 濃度 を 0.0 ~ 1.0 の 範囲 で 指定 し ます 。0.75 が デフ ォ ル ト の 値 で 
す 。 数 値 が 大 きく な る ほど ぼかし が 強く な り 、 逆 に 0.0 で は 透明 に な り ま す 。 

enabled で は 、 フ ィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル 
夕 を 実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


に 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 





<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> ぼかし を 入れ た い </title> 

<Style type="text/css"> 











<!-- 

.S0/7/@ { 
filterprogid:DXImageTransform.Microsoft.Blur(makeshadow=false, 
pixelradius=5,shadowopacity=0.50) 


} 
body { margin: 0 } 
div { 
width: 250px: 
heiqht: 280px: 
text-align: center: 
position: absolute: 
top: 20px: 
left: 20px 
} 
p { 
width: 200px: 
margin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-senif: 
background-color: #ff6633 
} 
ーー テ > 
</stvle> 
</head> 
<bodV> 


<div class="sg//e"> 

<P>Blur Filter</D> 

<img src="bird.jpg" at="" width="200" height="200"> 
</div> 

</bodV> 

</html> 








ぼかし を 入れ た い 
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FILTER 


filterprogid:DXImageTransform.Microsoft.Chroma( 文 ) es. 
filterxchroma( 文 ) 【iE4.0】 





w…… プ ロバ ティ 





色 を 透過 し て 表示 し 、 透 過 GIF の よう な 効果 を 得る こと が で きま す 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 

color 透過 する 色 

enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


color で 指定 し た 特定 の 一 色 を 透過 し て 表示 し ます 。 色 の 指定 に は 、RGB の 数 値 で 指定 する 方 
法 と 、 キ ー ワ ー ド で 指定 する 方 法 と が あり ます 。 色 の 詳し い 指 定 方 法 に つい て は p.47 を 参照 し て 
くだ さい 。 

enabled で は 、 フ ィ ル タ を 実行 する か どう か が を 指定 し ます 。 true また は 1 を 指定 する と フィ ル 
タ を 実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 特定 の 一 色 を 透過 し て 表示 し た い </title> 

<style type="text/css"> 


記 二 = 


導 ぞ へ い 


.S077/e { 
filterprogid:DXImageTransform.Microsoft.Chroma(color=#de5745) 

} 

body { marqin: 0 } 


div { 











に て よさ | 








width: 170px: 
height: 220px: 
text-align: center: 
position: absolute: 
top: 20px: 


left: 20px 
} 
p { 
width: 140px: 
margin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 
backqround-color: #de5745 
} 
ーー テニ 
</style> 
</head> 
<bodV> 


<div class="sg7p/e"> 


<D>Chroma Fiters/D> 
<imd src="cat.qif" alt="" width="120" height="120"> 


</div> 


</bodV> 
</htm> 





280 特定 の 一 色 を 透過 し て 表示 し た い 




















IE4.0 以上 の ブラ ウザ で の 指定 方 法 CCCCCCCCED se sa 2 sisa ee sesases ssees 


IE4.0 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設定 方 法 は Chroma 
を 指定 し た 場合 と 同じ で す 。 


-sample  { filter:Chroma(color=#de5745) } 


OTRKKKXXAKKXXK OURIIEKKAKKKRXRRRRRRKRKRKRRKR は XXKI OKKRRKIRKRIYYI 


ぞい 


FILTER 


filter:proqid:DXImageTransform.Microsoft.DropShadow() is.spt) 
filterxdropshadow( 文 ) (ilE4.0E】 





友 mes プ ロバ ティ 





影 を お と し た よう な 立体 的 な 効果 を 表現 し ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 


offx 影 の 右 方 向 へ の 距離 

offy 影 の 下方 向 へ の 距離 

color 影 の 色 

positive 影 の 透過 の 有無 (true、false も し く は 1、0) 

enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


影 を お と し た よう な 立体 的 な 効果 を 表現 し ます 。 

offx で 影 の 右 方 向 へ の 距離 を 、offy で 影 の 下方 向 へ の 距離 を ビク セル で 設定 し ます 。 ど ちら も 
マイ ナス の 数 値 を 指定 する と 左 方 向 、 上 方 向 へ の 陰 に な り ま す 。 

影 の 色 は color で 指定 し ます 。 色 の 指定 に は 、RGB の 数 値 で 指定 する 方 法 と 、 キ ー ワ ー ド で 指 
定 する 方 法 と が あり ます 。 色 の 詳し い 指定 方 法 に つい て は p.47 を 参照 し こく だ さい 。 

positive は 影 の 透過 の 有無 を 設定 し ます 。true また は 1 を 指定 する と 不透明 な 部 分 を 影 と し 、 
false また は 0 を 指定 する と 透明 な 部 分 を 影 に し ます 。 

enabled は 、 フ ィ ル タ を 実行 する か どう か を 指定 し ます 。 true また は 1 を 指定 する と フィ ル タ 
を 実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


に て - と くさ | 








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html><head> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 影 を お と し た い </title> 

<style type="text/css"> 


1 
・Sg77/e { 
filter:progid:DXImageTransform.Microsoft.DropShadow(offx=10, 
offv=5,color=#ff6633,positive=true) 
} 
body { margin: 0 } 
div { 
width: 250px: 
height: 280px: 
text-align: center: 
position: absolute: 
top: 20px: 
left: 20px 
} 
p { 
width: 200px: 
margin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 
} 
ーー テ 
</style> 
</head> 
<bodV> 


<div class="sg/p/e"> 

<P>DropShadow Filter</P> 

<img src="bird.jpg" at="" width="200" height="200"> 
</div> 

</body></html> 








影 を お と し た い 


で ヽ い 


伴い 
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DropShadow 
Filter 














IE4.0 以上 の ブラ ウザ で の 指定 方 法 EE RPCCCDLCCOCCCOOLLYYCYLYY 


IE4.0 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設 定 方 法 は 
DropShadow を 指定 し た 場合 と 同じ で す 。 


-sample1 { 
filter:dropshadow(offx=10,offy=5,color=#f6633,positive=true) 


FILTER 


filter:progid:DXImageTransform.Microsoft.Glow( 文 ) is.5t) 
filterxqlow( 太 ) 【iE4.0) 





友 eee プ ロバ ティ 


文字 や 画像 の 縁 か ら 外 向き に 発光 し て いる よう な 効果 を 表現 し ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 


color 発光 の 色 
strength 発光 の 強 さ (1 一 255) 
enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


color で 発光 色 を 指定 し ます 。 色 の 指定 に は 、RGB の 数 値 で 指定 する 方 法 と 、 キ ー ワ ー ド で 指 
定 する 方 法 と が あり ます 。 色 の 詳し い 指 定 方 法 に つい て は p.47 を 参照 し こく だ さい 。 

strength は 発光 の 強 さ を 1 一 255 の 整数 値 で 指定 し ます 。 数 値 が 大 きい ほど 強く な り 、 発 光 
部 分 が 大 きく な り ま す 。 

enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 








②③ っ い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html><head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 発光 し て いる よう に 見 せ た い </ せ tle> 

<style type= "text/css"> 

<!-- 

.S077/e { 
filter:progid:DXImageTransform.Microsoft.Glow(color=#ff6633, 
strength=10) 


body { margin: 0 } 
div { 
width: 170px: 
height: 220px: 
text-aliqgn: centerz 
position: absolute: 
top: 20Dx: 


left: 20px 
} 
p { 
width: 140px: 
margin: 15px auto: 
1 font: bold 1.3em AriaLHelvetica,sans-serif 
} 
ーー テ 
</style> 
</head> 
<bodV> 


<div class="sgp/e"> 

<P>Glow Filter</P> 

<img src="cat.qif" at="" width="120" height="120"> 
</div> | 
</body></html> 











286 発光 し て いる よう に 見 せ た い 


Glow Filter 














IE4.0 以上 の ブラ ウザ で の 指定 方 法 CGCCCCCCCSCCCCCCOUUCUDOCCCCCCCCKCLCCCCLLE い 


IE4.0 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設定 方 法 は Glow を 
指定 し た 場合 と 同じ で す 。 
-sample { 
filter:glow(color= 寺 f6633,strength=10) 


ROYXXLLIKISA COLA DOOR FOOEEEKEEKIKEIKRRIRERRRRERRRRERRRERRN) 


ブラ ウザ に よっ て 異な る フィ ル タ 効 果 領 域 RE OCCULTYYCLCLLCLCLLLLCULL OCPL 


フィ ル タ の な か に は 、 効 果 を 表現 する た め に 本 来 の 要素 サイ ズ よ り も 大 き な 空 間 を 周囲 に 必要 と する も 
の が あり ます 。 た と えば DropShadow フィ ル タ (Dp.282 参照 ) や Shadow フィ ル タ (Dp.298 参照) 、 
Glow フィ ル タ (Dp.285 参照 ) な ど で す 。 

要素 の 領域 が 限定 され て いて フィ ル タ 効 果 を 表現 する の に 十分 な 空間 が な い 場 合 、Internet Explorer 
4.0 と 5.5 以上 で は 、 処 理 方 法 が 異な り ます 。 IE4.0 で は 領域 の 外側 に は み 出る フィ ル タ 効 果 部 分 は 切り 
落と し て 表示 し ます が 、IE5.5 以上 で は ボッ クス 領域 の サイ ズ を 拡張 し て 全体 を 表示 する た め 、 効 果 が 大 
きく な る に つれ 表示 位置 が ずれ る こと に な り ま す 。 意図 し た と お り に 表現 され る ペー ジ を 作成 する た め に 
は 、 フ ィ ル タ 効 果 で 要求 され る 領域 も 考慮 し た うえ で 要素 の 位置 や サイ ズ を 指定 し た り 、 ペ ー ジ 全体 の レ 
イア ウト を 考え た りす る 必要 が あり ます 。 














に て くく | 








FILTER 


filterxprogid:DXImageTransform.Microsoft.Emboss( 文 ) (Es.st) 





太 mme プ ロバ パテ ィ 





文字 や 画像 を グレ ー ス ケー ル で エン ボス 加工 (凹凸 浮き 上 が っ た よう に 加工 する ) を し た よ 
うに 表示 し ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 
bias 浮き 上 が る 高 さ (-1.0 一 1.0) 
enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


bias は 浮き 上 が る 高 さ を -1.0 一 1.0 の 範囲 で 指定 し ます 。 デ フォ ルト の 値 は 0.7 で す 。 
enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 浮き 出し た よう に 表示 し た い </title> 

<style type="text/css"> 


いと すさ | 


<!-- 

・Sg77D/e { 
filter:progid:DXImageTransform.Microsoft.Emboss(bias=0.8) 

} 

body { margin: 0 } 

div { 


width: 250px: 
height: 280px: 
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text-align: center: 
position: absolute: 
top: 20pxXi 
left: 20px 


p { 
width: 200px: 
marqin: 15Dx auto: 
font: bold 1.3em AriaLHelvetica,sans-senif: 
backqround-color: #ff6633 
ーー テ 
</style> 
</head> 
<bodV> 
<div class= "so"> 
<P>Emboss Filter</D> 
<imq src="bird.jpg" at="" width="200" height="200"> 
</diV> 
</bodV> 
</html> 











当 浮き 出し た よう に 表示 し た い - Micr 
アイ ル (D 編集 6) 表示 お 気 に 和 DOQP 革 
2 ” 7FU2| 


@*・ の 6 回 
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FILTER 


filter:progid:DXImageTransform.Microsoft.Enqrave( 文 ) 【iEs.sti 





娘 ee プ ロバ パテ ィ 





文字 や 画像 を グレ ー ス ケー ル で 彫り 込ん だ よう に 表示 し ます 。 
指定 で きる プロ バテ ィ は 次 の 通り で す 。 
bias へ こむ 深 さ (-1.0 一 1.0) 
enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


bias は へ こむ お 深 さ を -1.0 一 1.0 の 範囲 で 指定 し ます 。 デ フォ ルト の 値 は 0.7 で す 。 
enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。 true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
ル <meta http-equiv="Content-Style-Type" content="text/css"> 

に <title> 彫り 込ん だ よう に 表示 し た い </title> 

<style type="text/css"> 


<!-- 


.S77/e { 
filter:progid:DXImageTransform.Microsoft.Engrave(bias=0.8) 

} 

body { margin: 0 } 

div { 


width: 250px: 
height: 280px: 
text-align: center: 
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position: absolute: 
top: 20px: 
left: 20px 


p { 
width: 200px: 
mardin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serifz 
backqround-color: #ff6633 
} 
ーー テ 
</style> 
</head> 
<body> 
<div class="sg77//e"> 
<p>Engrave Fiter</D> 
<img src="bird.jpg" alt="" width="200" height="200"> 
</div> 
</ body> 
</htm> 
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FILTER 


filter:progid:DXImageTransform.Microsoft.MaskFilter( 娘 ) (is.su:) 
filter:mask( 文 ) tiE4.0E】 





mee プロパティ 





文字 や 画像 を マス ク 処 理 を し て 表示 し ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 
color 塗り つぶ す 色 
enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


文字 や 画像 の 不透明 部 分 を 切り 抜い て 透明 に し 、 背 景 や 透過 処理 を し た 部 分 な ど 本 来 透明 な 部 
分 を color プロ パテ ィ で 指定 し た 色 で 塗り つぶ し ます 。 色 の 指定 に は 、RGB の 数 値 で 指定 する 方 
法 と 、 キ ー ワ ー ド で 指定 する 方 法 と が あり ます 。 色 の 詳し い 指定 方 法 に つい て は p.47 を 参照 し て 
くだ さい 。 

enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


いて とい | 


2 


JA 。 本 あん 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> マス ク を か けた い </title> 
<style type="text/css"> 
<!-- 
.S77//e { 
filter:progid:DXImageTransform.Microsoft.MaskFilter(color=#ff6633) 
} 
body { margin: 0 } 
div { 
width: 170px: 
heiqht: 220px: 
text-align: center: 
position: absolute: 
top: 20px: 
left: 20px 


p { 
width: 140px: 
marqin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 
} 
== 
</style> 
</head> 
<bodV> 
<div class="sg/7D/e"> 
<D>MaskFiter Fiter</p> 
<1mq src="cat.qtf" alt="" width="120" height="120"> 
</div> 
</bodV> 
</html> 
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MaskFilter 
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IE4.0 以上 の ブラ ウザ で の 指定 方 法 ESECCCCCCCCCCLLULLLLCLKYLLKLEKLCCOUCLCLLLTKIY 


IE4 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設定 方 法 は MaskFilter 
を 指定 し た 場合 と 同じ で す 。 
-sample { filter:mask(color=#ff6633) } 


に て よい 
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FILTER 


filter:progid:DXImageTransform.Microsoft.MotionBlur( 丸 ) [iss 
filterxblur( 文 ) tiE4.0E) 





ww プロバ ティ 





文字 や 画像 を ブレ た よう に 表示 し ます 。 
指定 で きる プロ バテ ィ は 次 の 通り で す 。 


direction ブレ の 方 向 (45 度 単位 ) 

strength ブレ の 強 さ 

add 元 の 画像 を 合成 する か どう か (true、false も し く は 1、0) 
enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


direction は ブレ の 方 向 を 45 度 単位 で 指定 し ます 。 た と えば 、0 で 真 上 へ 、180 で 真下 の 方 向 
へ の ブレ と な り ま す 。 デ フォ ルト は 270 で 左 の 方 向 と な り ま す 。 





strength は 、 ブ レ の 強 さ を 0 以上 の 整数 値 で 指定 し ます 。 数 値 が 大 きい ほど ブレ が 強く な り 、 
ブレ も 長く な り ま す 。 

add で は 、 ブ レ を 入れ た 画像 を 元 の スタ イル の 上 に 表示 する か どう か を true また は false で 指 
定 し ます 。 true で 元 の スタ イル に 上 書き し 、false で 上 書き し ませ ん 。 デ フォ ルト は false で 、 こ 
の 場合 は フィ ル タ 効 果 の 結果 の み 表示 され ます 。 

enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


に て と すさ | 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title= ブレ を つけ た い </title> 

<style type="text/css"> 

<!-- 

・S77/e { 
filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=270, 
strength=15,add=true) 


} 
body { margin: 0 } 
div { 
width: 250Dpx: 
height: 280px: 
text-align: center: 
position: absolute: 
top: 20px: 
left: 20px 
} 
フ っ p { 
イ width: 200px: 
タ margin: 15Dx auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 
background-color: ff6633 
} 
ーー テ 
</style> 
</head> 
<body> 


<div class= "se"> 
<p>MotionBlur Fiter</D> 
<img src="bird.jpg" at="" width="200" height="200"> 
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</div> 
</body> 
</html> 
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IE4.0 以上 の ブラ ウザ で の 指定 方 法 ECCCCCCCCCCCCCCCCCOCUCUCCUCCOCCLLLCCLLLLLL pos 


IE4.0 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設 定 方 法 は 
MotionBlur を 指定 し た 場合 と 同じ で す 。 
な お 、Blur フィ ル タ は IE4.0 と 5.5 以上 で は 性 質 が 異な り ま す の で 注意 し て くだ さい (Dp.276 参照 ) 。 


に て | 


.sample { 
filter:blur(direction=270,strength=15,add=true) 
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FILTER 


filterprogid:DXImageTransform.Microsoft.Shadow( 文 ) (iess 
filtershadow( 文 ) 【lE4.0E】 





雄 me プロ バテ ィ 





影 を て すっ た よう に 伸ばし ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 


color 影 の 色 

direction 影 の 伸び る 方 向 (45 度 単位 ) 

strength 影 の 長 さ (1 一 255) 

enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


color で 影 の 色 を 指定 し ます 。 色 の 指定 に は 、RGB の 数 値 で 指定 する 方 法 と 、 キ ー ワ ー ド で 指 
定 する 方 法 と が あり ます 。 色 の 詳し い 指定 方 法 に つい て は p.47 を 参照 し こく だ さい 。 

direction は 影 を 伸ばす 方 向 を 角度 で 指定 し ます 。 た と えば 、0 で 真 上 へ 、180 で 真下 の 方 向 と 
な り ま す 。 


0 | 45 | 90 135 180 225)270!315 
上! 大 右 『 右 F) ドド! だ RI 二 ! だ E! 


P4 叶 間 間 8890 一 ち 二 し | 全 ド D 下 | を トト 5 を | 
イ 
た ctrength は 影 の 長 さ を 1 一 255 か ら 指定 し ます 。 デフ ォ ルト の 値 は 5 で す 。 
enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。 true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 

<html><head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 影 を 伸ばし た い </title> 

<stvle type="text/css"> 

<!-- 

-Sg77/e { 
filter:progid:DXImageTransform.Microsoft.Shadow(color=#Tf6633, 
direction=135,strength=15) 


} 

body { margin: 0 } 

div { 
width: 170px: 
height: 220px: 
text-align: center: 
pOsition: absolute: 
top: 20px: 
left: 20px 

} 

p { 
width: 140px: 
margin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 

} 

ー> 

</style> 

</head> 

<bodV> 


<div class="sg/7p/e"> 

<P>Shadow Fiter</D> 

<img src="cat.gif" at="" width="120" height="120"> 
</div> 

</body></html> 








影 を 伸ばし た い 


いて と 
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に て 上 | 
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IE4.0 以上 の ブラ ウザ で の 指定 方 法 RCCGCCCCCCCCCCCCC Sn な で 95.awiese る eee を な sea 


IE4.0 以 上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設定 方 法 は Shadow 
を 指定 し た 場合 と 同じ で す 。 


-sample { 
filter:shadow(color=#f6633,direction="135",strength=15) 


FILTER 


filterxprogid:DXImageTransform.Microsoft.Wave( 文 ) [Es.st 
filterxwave( 文 ) 【iE4.0 





大 me プロ バ パティ 





波 打 っ た よう な 効果 を 表現 し ます 。 
指定 で きる プロ バテ ィ は 次 の 通り で す 。 
freq 波 の 数 
lightstrength 光 の 強 さ (0 一 100) 
phase 波 の 開始 位置 (0 一 100) 
strength 波 の 振幅 
add 元 の 画像 を 合成 する か どう か (true、false もしくは 1、0) 
enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


freq は 波 の 数 を 整数 値 で 指定 し ます 。 指定 する 値 が 大 きい ほど 波 の 数 が 多く な り 、 ウ ェ ー ブ の 
間隔 が 狭く な り ま す 。 

lightstrength は ウェ ー ブ に あたる 光 の 強 さ を 0 か ら 100 まで の 整数 値 で 指定 し ます 。0 で は 
光 が ま っ た く あ た ら な い 状態 と な り 、 ウ ェ ー ブ の 効果 は 要素 の 輪郭 以外 に 現れ ませ ん 。100 で は 
光 が も っ と も 強く あたっ て いる 状態 と な り 、 ウ ェ ー ブ の 谷 の 部 分 は 黒 に な り ま す 。 

phase は ウェ ー ブ の 始ま る 位置 を 0 か ら 100 まで の 整数 値 で 指定 し ます 。 

strength は ウェ ー ブ の 振幅 ( 横 方 向 へ の ゆれ ) を 指定 し ます 。 数 値 が 大 きい ほど ゆれ も 大 きく 
な り ま す 。 デ フォ ルト の 値 は 5 で す 。 

add は 元 の 画像 を 合成 する か どう か を 指定 し ます 。 true また は 1 を 指定 する と 元 の 画像 を 合成 
し 、 false また は 0 を 指定 する と 元 の 画像 を 合成 し ませ ん 。 

enabled で は 、 フ ィ ル タ を 実行 する か どう か を 指定 し ます 。true また は 1 を 指定 する と フィ ル 
タ を 実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


いて - と くさ | 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> ウェ ー ブ を か けた い </title> 

<Style type="text/css"> 

<!-- 

.S77/@ { 
filter:progid:DXImageTransform.Microsoft.Wave(freq=4, 
tightstrength=20,phase=30,strength=10,add=false) 


} 
body { margin: 0 } 
div { 
width: 250px: 
height: 280px: 
text-align: center: 
position: absolute: 
top: 20px: 
left: 20px 
} 
フ p { 
イ width: 200px: 
margin: 15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 
backqround-color: #ff6633 
} 
ーー テ 
</stvle> 
</head> 
<bodV> 


<div class="sg/7p/e"> 
<D>Wave Filter</D> 
<1mg src="bird.jpg" at="" width="200" height="200"> 
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IE4.0 以上 の ブラ ウザ で の 指定 方 法 RCCGGCCCGCCCCCLLCOKCLOCYULCYYLLCLTLLLKLLKYY 


IE4.0 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 設定 方 法 は Wave を 
指定 し た 場合 と 同じ で す 。 


と る も さ 


.sample { ル 
filter:wave(freq=4,ightstrength=20,phase=30,strength=10,add=false) タ 
} 


OCRRRYXRRIKAKLLKKLLLALKKLALKLKKRKMNK は SKK ミミ ミド ミミ ミミ ミミ ミミ ミミ ミミ ミミ トミ ミト ミミ まま] 


FILTER 


filterxprogid:DXImageTransform.Microsoft.BasicImaqe( 娘 ) (is.sw:) 





weees プ ロ パ ティ 





画像 や 文字 に 対す る さま ざま な フィ ル タ 効 果 を まとめ て 設定 し ます 。 
指定 で きる プロ パテ ィ は 次 の 通り で す 。 


graVscale グレ ー ス ケー ル 化 (1、0) 

invert 色 の 反転 (1、0) 

mask マス ク 処 理 (1、0) 

maskcolor 塗り つぶ す 色 

mirror 左右 の 反転 (1、0) 

opacity 不透明 度 (0.0 一 1.0) 

rotation 回 転 角度 (0 一 3) 

xraV 白黒 反転 (1、0) 

enabled フィ ル タ を 実行 する か どう か (true、false も し く は 1、0) 


grayscale は グレ ー ス ケー ル に する か どう か を 、invert は 色 を 反転 し て 表示 する か どう か を 指 
定 し ます 。 ど ちら も デフ ォ ル ト の 値 は 0 (通常 の 色 で 表示 する ) で す 。 
ルル mask は マス ク 処 理 を し て 表示 する か どう か を 指定 し ます 。 マ スク 処理 を する (1) よう 指定 す 
を 』 る と 、 文 字 や 画像 の 不透明 部 分 を 切り 抜い て 透明 に し 、 背 景 や 透過 処理 を し た 部 分 な ど 本 来 透 明 
な 部 分 を maskcolor プロ パテ ィ で 指定 し た 色 で 塗り つぶ し ます 。 デ フォ ルト は 0 (マス ク 処 理 を 
し な い ) で す 。 
maskcolor は マス ク 処 理 を し て 塗り つぶ す 色 を RGB 形式 で 指定 し ます 。 
mirror は 左右 を 反転 する か どう か を 指定 し ます 。 デ フォ ルト の 値 は 0 (反転 し な い ) で す 。 
Opacity は 不透明 度 を 、 透 明 の 0.0 か ら 不 透明 の 1.0 まで の 範囲 で 整数 値 で 指定 し ます 。 デ フ 
オォ ルト の 値 は 1.0 (不透明 ) で す 。 
rotation は 回 転 し て 表示 させ る 場合 の 角度 を 次 の 値 か ら 指定 し ます 。 デ フォ ルト は 0 で 回 転 し 
ませ ん 。 
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xray は X 線 写真 の よう に 白黒 反転 を し て 表示 する か どう か を 指定 し ます 。 デ フォ ルト の 値 は 0 
(通常 の 色 で 表示 する ) で す 

enabled は フィ ル タ を 実行 する か どう か を 指定 し ます 。 true また は 1 を 指定 する と フィ ル タ を 
実行 し 、false また は 0 を 指定 する と フィ ル タ を 実行 し ませ ん 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_J1S"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> さま ざま な 効果 を まとめ て 設定 し た い </title> 

<stvle type="text/css"> 

<!-- 

.S977/e { 
filterxprogid:DXImageTransform.Microsoft.Basiclmage (graVscale=1, 
mirror=1,0pacity=0.35,rotation=3) 


} 
body { margin: 0 } 
div { 
width: 250px: 
height: 280px: 
text-align: center: 
position: absolute: 
top: 20px: 
left: 20px 
} 
Pp { 
width: 200px: 
marqin:15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif: 
background-color: 持 f6633 
} 
ーー テ 
</stvle> 








さま ざま な 効果 を まとめ て 設定 し た い 


305 





</head> 

<body> 

<div class="sg77p/e"> 

<p>Basiclmage Filter</ D> 

<imd src="bird.jpg" at="" width="200" height="200"> 
</div> 

</body> 

</htm> 











さま ざま な 幼 果 を まとめ て 設定 し た い - Net 本 


| アイル) 四 集 (D 表示 ( び 検索 ⑧ ジャ ンプ ⑬) ブッ マーク (⑧ 
を u】 人 9 ド に | 回 BE | 
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の 
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叫 

















に て たい | 


306 さま ざま な 効果 を まとめ て 設定 し た い 


FILTER 


filterxfiiph() 【iE4.0】 
filter:flipv() 【iE4.0E】 


o ア ーー ニラ ドー = 





文字 や 画像 の 表示 方 向 を 反転 させ て 表示 し ます 。 
fiph は 対象 を 左右 に 、 和 lpv は 上 下 に 反転 させ ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 表示 方 向 を 反転 させ た い </title> 
<stvle type="text/css"> 
<!-- 
・Sg77D/e7 { filter fiiph() } 
.S077D/e2 { filter: fiipy() } 
body { marqin: 0 } 
div 有 ps7 。 { 
width: 250px: 
height: 280px: 
text-align: center: 


たい | 


position: absolute: 
top: 20px: 
left: 20px 

} 

div#7 罰 sv { 
width: 250px: 
height: 280px: 
text-align: center: 
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308 





position: absolute: 
top: 20px: 
left: 280px 


p { 
width: 200px: 
marqgin:15Dx auto: 
font: bold 1.3em AriaLHelvetica,sans-serf: 
background-color: #ff6633 
} 
ーー テ 
</style> 
</head> 


<bodV> 

<div class="sg7p/e7" id="7ps7"> 

<P>flipsh Fiter</D> 

<1mg src="bird.jpg" alt="" width="200" height="200"> 
</div> 

<div class="sgp/e2" 1d="psV"> 

<P>fliphv Fiter</D> 

<img src="bird.jpg" at="" width="200" height="200"> 
</div> 

</bodV> 

</html> 





表示 方 向 を 反転 させ た い 




















ぞい 


IE5.5 以上 の ブラ ウザ で の 指定 方 法 GCCCCCCCCCCCCCCYYYLYYYLYLCEYLCCT YY 


IE5.5 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 詳 し く は 
Basiclmage の 項 (p.304) を 参照 し こく だ さい 。 


-Sample1 { 
filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1) 
} 
.sample2 { 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) 


} 


NYALLILLLIAALKLGMKILIIKILUNIIIEKKKLNYKKIYYKKRRKKKXKKKXXYSEX ミ ミミ エミ エミ エエ ) 
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FILTER 


filterxgraV() [4.0E】 





文字 や 画像 を グレ ー ス ケー ル で 表示 し ます 。 モノクロ 写真 の よう な 効果 を 表現 で きま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> グレ ー ス ケー ル に し た い </ せ itle> 

<style type="text/css"> 

<!-- 


-S077D/e { filter: gray() } 


body { margin: 0 } 
div { 
P) width: 250px: 
height: 280px: 
し -】 text-aliqn: center: 


POsition: absolute: 
top: 20px: 


left: 20px 
} 
p { 
width: 200px: 
mardgin:15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif: 
background-color: #ff6633 
} 








310 。 グレース ケール に し た い 


ーー テニ 

</style> 

</head> 

<bodV> 

<div class="sg77p/e"> 

<D>Gray Fiter</D> 

<imd src="bird.jpg" alt="" width="200" height="200"> 
</div> 

</bodV> 

</html> 











良 グレ ー ス ケー ル に し た い - Micro 
アイ ル ⑥) 編集 (C 表示 ) お 気 に 和 Pr ” 


②・@ 因 間 り の 


ガレー ス ケー ル に し た い - Netsca 





@ イン ーネット 














IE5.5 以上 の ブラ ウザ で の 指定 方 法 SE PCOCLYPPLLCCKK い いい BOOCOCDOCCYYYCLLY 


IE5.5 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 詳 しく は 
Basiclmage の 項 (D.304) を 参照 し て くだ さい 。 


.sample { 
filter:progid:DXImageTransform.Microsoft.BasicImaqe(grayscale=1) 
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FILTER 


filter:invert() IE4.0] 





文字 や 画像 の 色 を 反転 し て 表示 し ます 。 
白色 は 黒色 へ 、 黄色 は 青色 へ 、 赤 色 は 水色 へ と いっ た よう に 処理 が 行わ れ ま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 色 を 反転 させ た い </title> 
<stvle type="text/css"> 
<!-- 
.S/7/e { filter: invert() } 
body {margin: 0 } 
div { 
width: 250px: 
height: 280px: 
text-align: center: 





に て - よ 、| 


position: absolute: 
top: 20Dx: 


left: 20px 

} 

p { 
width: 200px: 
margin:15px auto: 





font: bold 1.3em AriaLHelvetica,sans-serif: 
backqround-color: ff6633 








} 

に = 

</style> 

</head> 

<bodV> 

<div class="sg/7p/e"> 
<P>Invert Fiter</D> 
<img src="bird.jpg" at="" width="200" height="200"> 
</div> 

</body> 

</htm> 











当 色 を 反転 ませ を い - Microsoft [| 加 胡 
アイ ル () 編集 ) 表示 お 気 に AL” ア 講 


の 図 必 zi| 














IE5.5 以上 の ブラ ウザ で の 指定 方 法 RCCSCCCCCECEYYYELLYLCLLYLT eotesss 


IE5.5 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 詳 しく は 
Basiclmage の 項 (p.304) を 参照 し こく だ さい 。 





-sample { 
filter:progid:DXImageTransform.Microsoft.BasicImaqe(invert=1) 
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FILTER 


filterxxray() 【IE4.0E】 





画像 を X 線 写真 の よう に 表示 させ ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>X 線 フィ ル タ を か けた い </ せ title> 
<style type="text/css"> 
<!-- 
・Sg77/e { filterxxray() } 
body { margin: 0 } 
div { 
width: 250px: 
height: 280px: 
text-align: center: 





に て だ 


POsition: absolute: 
top: 20px: 
left: 20px 


p { 
width: 200px: 
mardin:15px auto: 
font: bold 1.3em AriaLHelvetica,sans-serif 
background-color: 計 f6633 








314 。X 線 フィ ル タ を か けた い 


ー テ 
</style> 

</head> 

<body> 

<div class="sample"> 

<D>Xray Filter</D> 

<1mg src="bird.jpg" alt="" width="200" height="200"> 
</div> 

</ body> 

</html> 











潮 X 線 フィ ル タ を が かけ たい - Microso 
アイ ル (E) 編集 () 表示 ⑦ お 気 に 和 し ”% 講 


@%・@ - 図 ) 必 zt@ 


N X 線 フィ ル タ を か けた い - Netscap.… に | 貼 了 





介 イン ター ネッ ト 











に て | 











IE5.5 以上 の ブラ ウザ で 同様 の フィ ル タ を 表現 する 場合 は 次 の よう に 指定 し ます 。 詳 し く は 
Basiclmage の 頂 (D.304) を 参照 し こく だ さい 。 


-sample { 


filter:progid:DXImageTransform.Microsoft.Basictmage(xray=1) 
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CursOT: 文 





文 …eoe キ ー ワ ー ド 





マウ ス な どの ポイ ン テ ィ ン グ デ バイ ス の 位置 を 示す カー ソル の 形状 を 指定 し ます 。 
値 に は 以下 の キー ワー ド が あり ます 。 


キー ワー ド IEe N6.2 
auto ブラ ウザ か 自動 的 に 指定 (デフ ォ ル ト ) 。。 
crosshair 十字 型 
default 標準 的 な カー ソル 。 矢印 が 多い 
Pointer アン カー 上 に ある こと を 示す 
move 対象 が 移動 可能 で ある こと を 示す 
e-resSize 右 方 向 に リサ イズ 可能 で ある こと を 示す 
ne-resize 右上 方 向 に リサ イズ 可能 で ある こと を 示す 
nW-resize 左上 方 向 に リサ イズ 可能 で ある こと を 示す 
n-resize 上 方 向 に リサ イズ 可能 で ある こと を 示す 
se-Tesize 右 下方 向 に リサ イズ 可能 で ある こと を 示す 
SW-resize 左下 方 向 に リサ イズ 可能 で ある こと を 示す 
s-resize 下方 向 に リサ イズ 可能 で ある こと を 示す 
W-resize 左 方 向 に リサ イズ 可能 で ある こと を 示す 





そ text 文字 を 範囲 指定 で きる こと を 示す 
人 wait 処 理 中 で ある こと を 示す 
help ヘル プ を 利用 で きる こと を 示す 
Internet Explorer 6 か ら 追 加 さ れ た キー ワー ド IE6  N6.2 


all-scroll ペー ジ が 上 下 左右 に スク ロー ル 可 能 で ある こと を 示す 3〉 Np 
Ccol-resize 左右 に リサ イズ 可能 で ある こと を 示す 
no-drop ドラ ッ グ し た 対象 が ドロ ッ プ で き な い 依 域 で ちる こと を 示す YWP 
not-allowed 要求 され た アク ショ ン が 動作 で き な い こと を 示す 
ProqreSs バッ ク グ ラウ ンド で 処理 が 行わ れ て いる こと を 示す  。 寺 
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row-resize 上下 に リサ イズ 可能 で ある こと を 示す キキ 吉 応 


urt( 六 ) 任意 の カー ソル (拡張 子 .cur と.ani の み 。 広 に URL を 指定 ) 未 対応 


vertical-text 縦 書き 文字 を 範囲 指定 で きる こと を 示す トー ゴ 未 対 応 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type " content="text/css"> 
<title> カー ソル の 形状 を 指定 し た い </ title> 
<style type="text/css"> 
1 
td { 
background-color: #e4e4e4: 
color: black: 
font-family: AriaLHelvetica,sans-serif: 
font-weight: bold: 
width: 200px: 
padding: 15px: 
text-aliqgn: center 
} 
# が Sp/e7 { cursor: help } 
# が Sg77p/e2 { cursor: url(elogo.cur) } 
ーー テ 
</style> 
</head> 
<bodV> 
<table> 
<tr> 
<td id="sg77p/e7 ">cursor: help</td> 
<td id="sg7p/e2">cursor: ur(elogo.cur)</td> 
</tr> 
</table> 
</bodV> 
</htm に > 











カー ソル の 形状 を 指定 し た い 


に で ム 」 
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当 カー ソル の 形状 を 指定 し た い - Microsoft mternet Explorer 











当 カー ソル の 形状 を 指定 し た い 





Microsoft Internet Explorer 





人 Intemet Explorer 6 で は 拡張 子 .cur、.ani の 画像 を カー ソル に 指定 する こと も で きま す 





EE た ム な 





人 Netscape 6.2 は 画像 を カー ソル に 指定 で きる url0 に は 対応 し て いま せん 
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1 1 IE5.5 1 ココ NN4 NN4.7 ド に ルコ 
auto O O 〇 O も 3 し 3 〇 
crosshair O O O O メ メ O 
default O O 〇 O O ※ ※ O 〇 
pointer ※ ※ ※ O 〇 ※ ※ O 
move O O O O X 人 O 
e-resize O O O O メ メ O 
ne-resize O O O O ※ メ O 
nw-resize O O O O ※ ペ O 
nr-resize O O O 9) メ メ O 
se-resize O O O O ※ ※ O 
sW-resize O O O O 3 メ O 
srresize O O O O ※ に 3 O 
W-resize O O O O メ ペ O 
text O O O O ペ メ O 
wait O O O O メ メ O 
hep O O O O 較 較 O スイ 
al-scroll X ※ し 3 O ※ 26 ※ // 
coLresize ※ ※ ※ O メ X ※ 他 
no-drop し 3 3 ※ O 96 ※ し 3 
not-allowed ※ ※ ※ O 3 ※ X 
DrOgress ※ ※ ※ 〇 ※ し 3 X 
TOw-resize ※ ※ ※ 〇 ※ ※ ※ 
ml() X メ 内 O X X 内 
vertica-text ※ ※ ※ O X ※ し 3 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
※ Macintosh 版 IE5 は pointer に も 対応 し て いま す 





scrollbar-base-color: 文 ー 時 本 の 色 
scrollbar-face-colorx 文 表面 の 色 
scrollbar-arrow-color: 太 矢印 の 色 


scrollbar-highiight-color: 文 ハイ ライ ト 部 分 の 色 
scrollbar-3diiqht-color: 文 ボタ ン の ハイ ライ ト 部 分 の 色 
scrollbar-shadow-color: 文 シャ ドウ 部 分 の 色 
scrollbar-darkshadow-color: 文 ボタ ン の シャ ドウ 部 分 の 色 





文 *eccce キ ー ワ ー ド 
色 指 定 値 





スク ロー ル バ ー の 色 を 指定 し ます 。Internet Explorer が 独自 に 拡張 し た プロ バテ ィ で 、 IE 5.5 
以上 で 有効 に な り ま す 。 な お 、 こ の プロ バテ ィ を 指定 する と スク ロー ル バ ー の 形状 が Windows 
Me まで の も の に 変更 され ます 。 

各 プ ロバ ティ が 制御 する の は 下図 の 部 分 で す 。 


MPEG ROSS 
ょ 日 
キ . 事 : 
@ @ @ @ ら 6 @ 
⑩ base 全体 の 基本 と な る 色 @ face スク ロー ル バ ー の 表面 の 色 
@ arrow 矢印 の 部 分 の 色 @⑩ highlight ボタ ン 内 側 の 左 と 上 の 枠 色 
kg @3dight ボタ ン 外 側 の 左 と 上 の 枠 色 @ shadow ボタ ン 内 側 の 右 と 下 の 枠 色 
【 ツ 】 の @darkshadow 。 ボタ ン 外 側 の 右 と 下 の 枠 色 
他 
人 scrollbar-base-color ^ scrollbar-face-color ^ scrollbar-arrow-color 
^ scrollbar-highlight-color ^ scrollbar-3diiqht-color 
ag 問 
選 引 当 
^ scrollbar-shadow-color ^ scrollbar-darkshadow-color 


320 パス クロ ー ル バー の 色 を 設定 し た い 


色 の 指定 に は 、RGB の 数 値 で 指定 する 方 法 と 、 キ ー ワ ー ド で 指定 する 方 法 と が あり ます 。 色 の 
詳し い 指定 方 法 に つい て は p.47 を 参照 し こく だ さい 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> スク ロー ル バ ー の 色 を 設定 し た い </title> 
<stvle type="text/css"> 
<!-- 
bodv,div { 
scrollbar-arrow-color: #ffffff 
scrollbar-face-color: #ffO0000: 
scrollbar-track-color: #ff9999 


div { 
width: 15em: 
height: 5em: 
overflow: scroll 
} 
ーー テニ 
</style> 
</head> 
<bodV> 
<div>Intemet Explorer 5.5 以 上 で は 、 ス クロ ー ル バー の 色 を 指定 で きま す 。 面白 い 機能 で す 
が 、Netscape で は 対応 し て いな い の で 注意 が 必要 で す 。</diV> 
</body> 
</html> 











スク ロー ル バ ー の 色 を 設定 し た い 


に で し 、 
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当 スカ ロー ル バ ー の 色 を 該 定 し た い - Microsoft Internet Explorer 


アイ ル ) 編集 表示 AO ッ ー ル ① へ ルプ 





Intermet Explorer 55 以 上 で は 、 ス 
クロ ー ル バー の 色 を 指定 で きま 

す 。 面白 い 機能 で す が 、 Netscape 
で は 対応 し て いな い の で 注意 が 必 





N スカ ロー ル バ ー の 色 を 該 定 し た い - Netscape 6 





Intermet Explorer 5. ES ス 
クロ ー ル バー の 色 を 指定 で き 

す 。 面白 い 機能 で す が 、 esame 
で は 対応 し て し ) な い の で 注意 が 必 





^A Netscape は 対応 し て いま せん 





に だ た ム 、 





共通 1 1 ミミ 1 主 ]】 1 ヨゴ NN4 NN4.7 N6.2 
キー ワー ド x 還 O O 3 較 メ 
色 指 定 値 し 3 に 3 O O X 皿 由 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


参照 内 容 領域 の 幅 と 高 さ を 指定 し た い ・…………………| D.198 内 容 が あぶ れる 場合 の 梓 方 向 の 処理 方 法 を 指定 し た い …・ p.238 
や 内 容 が あふ れる 場合 の 処理 方 法 を 指定 し た い ………| D.230 内 容 が あぶ れる 場合 の 縦 方 向 の 処理 方 法 を 指定 し た い ……・ p234 


322 "スク ロー ル バ ー の 色 を 設定 し た い 







3 OO 
IME の 入力 状態 を 指定 し た い 


ime-mode: 文 





雄 ecc キー ワー ド 






日 本 語 入力 シス テム の ON/OFF を 設定 し ます 。 Internet Explorer が 独自 に 拡張 し た プロ パテ ィ 
で 、IE 5 以降 で 有効 に な り ま す 。 
値 に は 以下 の キー ワー ド が あり ます 。 
auto IME に 作用 し な い 。 こ の プロ パテ ィ を 指定 し な い 場 合 と 同様 (デフ ォ ル ト ) 
active IME を 有効 に する (オン ) 
inactive IME を 無効 に する (オフ ) 
disabled IME を 完全 に 無効 に する (オフ ) 


active で 日 本 語 入力 を オン に し 、inactive で オフ に し ます が 、 い ずれ も ユー ザー の 操作 で 変更 
は 可能 で す 。disactive は 完全 に IME を 使用 で き な い よう に する た め ユ ー ザ ー が 日 本 語 入 力 を オ 
ン に する こと も で きま せん 。 

この プロ バテ ィ を 指定 する こと で 、 ユ ー ザ ー が IME の ON/OFF を 切り 替え る 手間 を 省 い た り 、 
全角 半角 の 入力 ミス を 防い だ りす る こと が 可能 に な り 、 入 力 時 の 操作 性 が 高まり ます 。 


IME の 入力 状態 を 指定 し た い 


に で に ム 」 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title>IME の 入力 状態 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
input が spfe7 {ime-mode: active } 
input#sgpfe2 {ime-mode: inactive } 
input#sgpfe3 {ime-mode: disabled } 
し フ 
</style> 
</head> 
<bodV> 
以下 に 記入 し て お 送り くだ さい 。 
<form> 
<D テ > 
名 前 (日 本 語 )<input type="text" size="30" name="n1" id="sg77p/e7"><br> 
名 前 (ロー マ 字 ) <1nput tVpe="text" size="30" name="n2" id="sgpe2"> 
</p> 
<D> 
メー ル ア ド レス <input type="text" size="30" name="mail' id="sgp/e3"> 
</D> 
<input type="submit" value=" 送 信 "> 
<input type="reset" value=" リ セッ ト "> 
</form> 
</bodV> 
</htm> 


E た ム 』 











324 IME の 入力 状態 を 指定 し た い 


ョ TE の 入力 捧 第 を 指定 し た い - Microsoft Internet Explorer 





以下 に 記入 し て お 送り くだ さい 。 


を 前 (部 ーーーー コ 
名 前 (ロー マ 字 7 


メー ル ア ド レス ] 
EEHIEKG7 当 











し 1 ゴリ マヨ りえ 





K マ ん た ん | 
以下 に 記入 し て お 送り くだ さい 。 


名 前 (日 本 天 「〕 
名 前 四半 ーーーー 
メー ル ア ド レス | 

送信 | り tyh | 





人 Netscape は 対応 し て いま せん 

















そ 
(のり ) 
他 
1 1 IE5.5 IE6 NN4 ドド し 守 4 ド に ルイ 

auto ペ O O O ※ ※ メ 

active も 3 O O O ※ に 3 し 3 

inactive も 3 O O O 3 3 X 

disabled し 3 O O O ※ し 3 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
※ Macintosh 版 IE5 は 対応 し て いま せん 





content: 雄 





文 *ce キ ー ワ ー ド 
URL 
文字 列 
属性 





要素 の 前 後に テキ スト や 画像 を 挿入 する よう 設定 し ます 。 :after 擬似 要素 や 、:before 擬似 要素 
(p.41 参照 ) と と も に 使用 し ます 。 


値 に は 次 の よう な 指定 方 法 が あり ます 。 
キー ワー ド 
open-quote 先頭 に 表示 する 引用 符 
close-quote 最後 に 表示 する 引用 符 


no-open-quote 引用 符 な し の 引用 の 先頭 
no-close-quote 引用 符 な し の 引用 の 最後 
open-quote は 引用 の 開始 部 、close-quote は 引用 の 終了 部 に 指定 し ます 。 デ フォ ルト の 引用 
符 は ブラ ウザ に より ます が (Netscape の 場合 は 「" "」)、 挿 入 さ れる 引用 符 を 変更 する に は 
quotes プロ パテ ィ を 設定 し ます (次 項 参照 )。 
no-open-quote、no-close-quote で は 引用 符 は 追加 せ ず に 、 引用 レベ ル の み 一 段 深く 変更 
し ます 。 no-open-quote は 引用 の 開始 部 、no-close-quote は 引用 の 終了 部 に 指定 し ます 。 


URL 


る content: url(" 近 ") 区 … 画 像 ファ イル の URL 
他 追加 する 画像 ファ イル の URL を 指定 し ます 。HTML 文書 か ら 外 部 の スタ イル シー ト を 読み 込 
お 場合 は HTML 文書 か ら の 相対 URL で は な く 、 ス タイ ルフ ァイル か ら の 相対 URL で 指定 する 
必要 が あり ます 。 
文字 列 
content: "人 へ" へ …… 挿 入 し た い 文字 列 
追加 する 文字 列 を 指定 し ます 。 





属性 
content: attr( 〇 ) の ……- タ グ の 属性 の 値 
に 指定 し た タグ の 属性 の 値 を 表示 し ます 。 サン プル で は alt 属性 の " 顔 を 出し た ネコ "と いう 値 
が 画像 の 後ろ に 挿入 され て いま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 前 後に 内 容 を 追加 し た い </title> 
<style type="text/css"> 
<!-- 
pibefore { content: url("balLqif") } 
piafter { 
content: "Check! の : 





font-size: x-smal 
color: red 


} 


span:before {content: open-quote } 





span:after {content: close-quote } 
img:after { 
content: attr(alt): 
font-size: small 
} 
ーー テ > 
</style> 
</head> 
<bodV> 
<div><imq src="cat1.qif" alt=" 顔 を 出し た ネコ "></diV> 


に だ ム 、 


<D テ > 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば <span>Web ペ ー ジ の レイ アウ ト を 定義 す 
る 技術 </span> と いう こと が で きま す 。 文書 の 論理 構造 に 関す る 指定 と 体 哉 に 関わ る 指定 
と を 分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と い 











う 姿 勢 の も と に 生み 出さ れ ま し た 。 

</p> 

<D> 

W3C は 1996 年 12 月 に スタ イル シー ト 言 語 の 一 つ で ある CSS1 (Cascading Style Sheets 
Level 1) を 勧告 し 、Intemet Explorer 3.0 と Netscape Navigator 4.0 が この 技術 を 導入 し は じ 
め ま し た 。CSS1 で は HTML で 可能 だ っ た デザ イン の ほとん ど を 扱え る よう に な っ て いま す 。 
その 後 1998 年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ ま し た 。 

</Dp> 

</body> 

</htm> 

















調 入 に 内 容 を 追加 し た い - Microsoft Internet Explor - | 硝 


カイル) 杜 集 ⑰ 表示 ⑰ ッ ー ル D へ ル 2⑪ 
OR・O 回 四 @ の mw 六 moo の zo の ら - 肝 加 ・ ロ "yr 


スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば Web ペ バー ジ の レイ アウ ト を 定義 する 技術 と いう こと が で きま す . 
文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 来 HTML の 機能 で は な い 体 裁 の 制御 
に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ ま し た 。 


W3C は 1996 年 12 月 に スタ イル シー ト 言 語 ひ の ー つ で ある OSS1 (Cascading Style Sheets Lsvel 1) を 勧告 し 、 
Intemet Explorer3.0 と Netscape Navigator 40 が この 技術 を 導入 し は じ め ま し た . OSS1 で は HTML で 可能 だ 
っ た デザ イン の ほとん ど を 扱え る よう に な っ て いま す 。 その 後 1998 年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 
出さ れ ま し た . 





4 Internet Explorer は 対応 し て いま せん 





E た 』J 








人 を 出し た ネコ 、 
タイ ル シ ー ト は 、 ひと こと で 表現 する な ら は "Web ペー ジ の レイ アウ ト を 定義 する 技術 ない うこ と が で きま す . 文 
| 草 の 論理 恒 造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 本 来 HTML の 機能 で は 人 な 体裁 の 制御 に つい て は 
別 の 方 法 を 導入 し よう と いう 姿勢 の も と に 生み 出さ れ ま し css 
3O は 1996 年 12 月 に スタ イル シー ト 言 語 の 一 つ で ある CSS1 (Cascading Style Shaets Level 1) を 勧告 し 、 
| Ttermet Explorer3.0 と Netscape Navigator 40 が この 技術 を 導入 し は じ め ま し た 。 CSS1 で は HTML で 可能 だ っ た デザ 
イン の ほとん ど を 扱え る よう に な っ て いま す . その 後 1998 年 5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ ま し た . 


Cmwct 
ニー ニーー 

















そ 
) 
他 
IE4 1 1 王 二 ]】 IE6 ドド し 9 NN4.7 N6.2 

キー ワー ド メ し 3 メ メ メ ※ O 

URL し 3 し 3 し 3 3 し 3 ※ 〇 

文字 列 X ※ ※ ※ ※ ※ O 

属性 5 ※ 3 X ※ ※ O 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


参 
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に た ム 』 


330 





quotes: リリ 誠 " So 
quotes: 全 





先頭 に 表示 する 引用 符 
*eees 最 後に 表示 する 引用 符 
全 *eoe キ ー ワ ー ド 





content プロ パテ ィ (p.326 参照 ) の 値 に open-quote また は close-quote を 指定 し た 場合 


に 、 追 加 さ れる 引用 符 を 指定 し ます 。 


値 に は 次 の よう な 指定 方 法 が あり ます 。 


"先頭 の 引用 符 " "後ろ の 引用 符 " 


先頭 に 表示 する 引用 待 と 後ろ に 表示 する 引用 符 を 、 そ れ ぞ れ 「'」 シン グル クォーテーション ま 


た は 、「"」 (ダブ ルク オー テー ショ ン ) で 囲み 、 半 角 ス ペー ス で 区 切っ て 指定 し ます 。 


キー ワー ド 


none content プロ パテ ィ の 値 に open-quote や close-quote が 指定 され て いて も 、 
引用 待 を 追加 し な い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 引用 符 を 指定 し た い </Hitle> 

<style type="text/css"> 


<!-- 





body { iine-height: 140% } 
PB {quotess " ") 
p:before { content: open-quote } 
p:after { content: close-quote } 
span {quotess "【"  "} 


span:before {content: open-quote } 

span:after {content: close-quote } 

ー> 

</style> 

</head> 

<body> 

<P> 

スタ イル シー ト は 、 ひ と こと で 表現 する な ら ば <span>Web ペー ジ の レイ アウ ト を 定義 す 
る 技術 </span> と いう こと が で きま す 。…… (中 略 ) …… 
</P> 

</body> 

</html> 











中 引用 符 を 指定 し た い - M oft jnternet Explorer 
アイ ル (P 編集 表示 ⑦ お 気 に 和 AD⑯ ツー ル ① へ JI プ ⑪ L』 
@⑨ 束 ・ の 6 較 回 の es 宮 5mc20 輸 ケ の の 加須 回 ・』 の ” 7RL2⑩ 


スタ イル シー ト は 、 ひと こと で 表現 する な ら ば Web ペ ー ジ の レイ アウ ト を 定義 する 技術 と 


いう こと が で きま す . 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と を 分 離さ せ 、 
本 来 HTML の 機能 で は な い 体 裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と いう 姿勢 の 
も と に 生み 出さ れ ま し た 。 





| 坊 バ ー ジ が 表 志 され まし た 








4^ Internet Explorer は 対応 し て いま せん 








「 ス あ イル シ ー ト は 、 ひと こと で 表現 する な ら 人 [Web ペー ジ の レイ アウ ト を 定義 する 授 術 】 いう 


こと ど が で きま す . 文書 の 論理 構造 に 関す る 指定 と 体裁 に 関わ る 指定 と 分離 させ 、 本 来 困 ML 


に で こい 、 








IE4 IE5 T 王 IEe ROWI RY N6.2 
引用 符 メ メ 3 5 較 x O 
※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 


前 後に 内 容 を 追加 し た い … パ ーー ドー ドー ドー p386 
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E た ム 、 


332 四 


direction: 太 
unicode-bidi: 区 





文 *eece キ ー ワ ー ド 
*eee キ ー ワ ー ド 





文字 の 表記 方 向 を 指定 し 、 表 記 方 向 の 異な る 言語 を 混在 で きる よう 設定 し ます 。 

た と えば 日 本 語 や 英語 は 左 か ら 右 へ と 記述 し ます が 、 ア ラビ ア 語 や へ ブラ イ 語 な どの 文字 は 右 
か ら 左 へ と 記述 し ます 。direction プロ パテ ィ と unicode-bidi プロ バテ ィ で 言語 の 表記 方 向 を 指 
定 す る こと に より 、 こ うし た 表記 方 向 の 異な る 言語 が 混在 する ペー ジ を 適切 に 表示 で きる よう に 
な り ま す 。 


direction 
direction は 文字 の 表記 方 向 を 指定 する プロ パテ ィ で す 。 値 に は 以下 の キー ワー ド が あり ます 。 
tr 左 か ら 右 の 方 向 (Left To Right の 意味 ) 
itL 右 か ら 左 の 方 向 (Right To Left の 意味 ) 


な お 、direction プロ バテ ィ を イン ライ ン レ ベル 要素 に 適用 させ る に は 、 次 の unicode-bodi 
プロ パテ ィ の 値 に embed も し く は bidi-override が 指定 され て いる 必要 が あり ます 。 


unicode-bidi 
unicode-bidi は 文字 の 表記 方 向 に つい て の 指定 を 新た に 埋め 込ん だ り 上 書き し た りす る プロ パ 
ティ で す 。 値 に は 以下 の キー ワー ド が あり ます 。 
normal 文字 の 表記 方 向 に 関す る 指定 を 新た に 組み 込ま すず 、 そ の まま で 表記 する 
embed 文字 の 表記 方 向 に 関す る 指定 を 新た に 組み 込む お 。 そ の 際 の 表記 方 向 は 
direction プロ バテ ィ で 設定 され た 値 に な る 
bidi-override 文字 の 表記 方 向 に 関す る 指定 を 無効 に し 、direction プロ パテ ィ で 設定 
され た 値 に 上 書き する 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<title> 文字 の 表記 方 向 を 指定 し た い </title> 
<style type="text/css"> 
<!-- 
PD.S977D/e7 { 
direction: rt じ 
unicode-bidi: embed 


} 

P.Sg77D/e2  { 
direction: rt 
unicode-bidi: bidi-override 

} 

ーー テ 

</style> 

</head> 

<bodV> 


<P class="sg/7p/e7 "> 日 本 語 の 表記 方 向 は 左 か ら 右 で す 。</P> 
<D class= "sg/7p/e2"> 日 本 語 の 表記 方 向 は 左 か ら 右 で す 。</P> 
</bodV> 
</htm> 











に に ム 、 














。 日 本 語 の 表記 方 向 は 左 か ら 右 で す 
。 す で 右 ら か 左 は 向 方 記 表 の 語 本 日 

















。 ュ 

(/) 

他 
direction 1 ゴマ 1 二 】 1 三 -] IE6 NN4 NN4.7 ド に ル 
lr し 3 O O O ※ も 3 O 
hi ※ O O ) ※ ※ ⑥) 
unicode-bidi 1 1 王 】 IE5.5 1 ヨゴ NN4 NN4.7 ド に ルコ 
bidi-override ※ 〇 O 〇 ※ 9 O 
embed ※ O ⑨) O に 3 も 3 ⑥) 








pade-break-after: 文 直後 の 改 ペ ー ジ 
page-break-before: 太 直前 の 改 バージ 





文 *ecee キ ー ワ ー ド 





印刷 時 に 改 ペ ー ジ が 行わ れる 位置 を 指定 し ます 。 
page-break-before は 指定 し た 要素 の 直前 の 改 ペ ー ジ を 、page-break-after は 指定 し た 要 
素 の 直後 の 改 ペ ー ジ を どの よう に する か を 指定 し ます 。 
それ ぞ れ 値 に は 以下 の キー ワー ド が あり ます 。 
alwaVs 改 ペ ー ジ を 行う 
auto 改 ペ ー ジ を 制御 し な い (デフ ォ ル ト ) 
empty-string 改 ペ ー ジ を 行わ な い 


empty-string は Internet Explorer が 独自 に 拡張 し た 値 で す 。 こ の 値 を 指定 する と 、 対 象 と 
な る オブ ジェ クト を 印刷 する 際 に 要素 の 前 後 で 改 ペ ー ジ を し な く な り ま す 。 


に らし 、 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> 印刷 時 の 改 ペ ー ジ を 指定 し た い </title> 

<style type="text/css"> 

<!-- 

h1 { text-align: center } 

h2 { page-break-before: always } 

hr { page-break-after: always } 

= ニッ > 

</style> 

</head> 

<bodV> 

<h1> 第 一 部 スタ イル シー ト の 基礎 </h1> 

<h2> スタ イル シー ト と は </h2> 

<P> Web ペ ー ジ の 話題 の な か で 、 ス タイ ル シ ー ト ・CSS と いう 言葉 は 決し て めずらし い 
も の で は な く な り ま し た 。 ス タイ ル シ ー ト と は 、 ひ と こと で 表現 する な ら ば 「Web ペー ジ 
の レイ アウ ト を 定義 する 技術 ] と いう こと が で きる で し ょ う 。</P> 


<hr> 

<p> スタ イル シー ト を 使い こなす に は 、HTML の 基礎 を 理解 し て お く 必 要 が あり ます 。 ス タ 
イル シー ト に つい て 学習 する 前 に 、 ま ず は 次 の 章 で HTML の 基本 を 確認 し て お きま し ょ う 。 
</D> 

<h2>HTML の 基本 </h2> 

<P>HTML の 一 番 基 本 的 な 構造 を 示す と 次 の よう に な り ま す 。…… (中 略 ) …… </P> 
</bodV> 

</htm> 


EE た ム 、 
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第 一 部 スタ イル シー ト の 
基礎 





スタ イル シー ト と は 

ーーー ウー 
う 言 工 は 決し て めずらし い 

RS スタ イル シー ト 


と は 。 TWeb べ 
テト する 時 と いう 
こと が で きる で し ょ う 。 


Web ペ ー ジ を 記 寺 す る HTML は 文書 の 計 
ーー 』 


スタ イル シー ト を 使い こなす に は HTML 
し て ぁ て ュ 





第 一 部 スタ イル シー ト の 
基礎 


スタ イル シー ト と は 
ー ジ の 医 罰 の な か で 、 ス タイ ル シ 








スタ イル シー ト を 使い こなす | 
の 和 を 理 有 し て なく ぶ 生 が 


タイ ル シ ー ト に つい て 簡 村 する 側 に 、 ま す 
の HTM の 生じ て お すま 
よう > 


の 基本 
1 村人 を ※ す と の と 





人 Netscape は 対応 し て いな い の で 、 改 ペー ジ の 制御 は 行わ れ ま せん 


1 ゴ ( 


ば 
し 3 
き 


HTML の 一 

ーー 
トー ここ ニニ ーー ニー ニー] 
ーー 

ーー キュー ョ ーー キマ co 
ーー デー 
ーー ニー 
ーー ニー ニニ ーー 
pm ニャー+ーー キ = モー ュー 
に ーーー ペン ーーー 











1 王 】 1 主 穫 】 EG6 NN4 NN4.7 に [に ルイ 
always ※ O '⑥ ず ) O 3 に 
auto メ O O O X X 
empty-string ※ O O O も 3 ※ 





※ 適 用 する セレ クタ に よっ て も 効果 が 変わ り ま す 
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behavior: 文 





太 eeeeeeURL 
オブ ジェ クト 1D 





指定 し た 要素 に 対し 、 外 部 スク リプ ト を 適用 させ ます 。 こ れ に より 従来 ペー ジ に 埋め 込ん で い 
た スク リブ プ ト を ペー ジ か ら 切 り 離 し 、 一 括 管理 する こと も 可能 に な り ま す 。 
値 に は 次 の よう な 指定 方 法 が あり ます 。 


URL 
behavior: urt(" 近 ") 。 支 外部 スク リプ ト の URL 


オブ ジェ クト ID 
<object> タグ の ID 属性 の 数 字 を 指定 し ます 。<object> タグ で な ん ら か の コン トロ ー ル を 呼 
び 出 す 場 合 は 、 呼 び 出 す コ ント ロー ル を behavior プロ バテ ィ で 扱う こと が で きま す 。 


スク リプ ト の ファ イル hange.ht 


<script> 
attachEvent("onclick",event_onclick): 
function event_onclick(){ 


style.color="Hff8800'} 
</script> 





ヒム 











<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title> ス クリ プ ト を ペー ジ か ら 分 離さ せ た い </title> 

<style type="text/css"> 

<!-- 


p { behavior: url("change.htc") } 














} 
ーー テ 
</style> 
</head> 
<bodV> 
<D> クリ ッ ク す る と 色 が 変わ り ま す 。</p> 
</bodV> 
</html> 
そ 
の 
他 
1 IE5 IE5.5 1 ゴゴ ド に いし 3 ドド 邊 4 ド に ルコ 
URL ※ O 9 O メ ※ メ 
オブ ジェ クト 1D メ O り O ペ メ メ 
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Web ペー ジ カ ラ ー チ ャ ー ト 
に (た 3 

Web 配色 サン プル 

1 コレ た ヤリ テル レル ン ル < 
適用 ・ デ フォ ルト ・ 継 承 一 覧 
スタ イル シー ト 乗 換 一 覧 





プロ パテ ィ イ ン デ ックス 
ヒン ケル ルル. 
レル シル 


付録 





スタ イル シー ト で は 、 背 景 や 文字 な どい ろ い ろ な 要素 の 色 を 指定 する 際 に 、 色 を 構成 する 3 つ 
の 値 を 使っ た RGB 値 か 、 色 名 な どの キー ワー ド を 使用 し ます 。 






この 16 色 は HTML4.01 で 定義 され て いる 色 で す 。 こ れ ら は Windows VGA の パレ ッ ト に 準 
拠 し た 色 で 、 色 名 に よる 指定 (D.346) で も 正式 に 使え る 色 と な り ま す 。 


EiUUUUi blue 





fffOO yellow #ffO rgb(255,255,0) rgb(100%,100%,0%) 
#f0000 red 導 00 rgb(255.0.0) rgb(100%,0%,0%) 
肝 fOOff fuchsia 航 Of 。 rgb(255,0,255) rgb(100%,0%,100%) 










ETUUUU maroon CU6 2 は:XU り | rgb(50%,0%,0%) 


だ りり り リ いり い / コ - rgb(128,128,0) rgb(50%,.50%,0% 





#008080 | = rgb(0,128,128) rgb(0%,50%,50%) 
UTUU:1 り Purple 6 は: 玉 U 克 りう | rgb(50%,0%,50%) 
#000000 FTd 1 #000 riU( 見 員 り ) UM) 
#808080 FIcU/ rgb(128,128,128) rgqb(50%,50%,50%) 
#cOc0c0 silver - rgb(192,192,192) rgb(75%.75%,75%) 
ffff 。 white 寺 作 rgb(255,255.255) rb(100%.100%%100%) 
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@ RGB 値 に よる 指定 


コン ピュ ー タ で は 色 の 3 原色 で ある 赤 、 緑 、 青 の それ ぞ れ の 強 さ を 0 一 255 まで の 数 値 (256 
段階 ) で 表す こと で 、 特 定 の 色 を 表現 し て いま す 。 し た が っ て フル カラ ー と 呼ば れる も の で は 
256 x 256 x 256=16777216、 つ まり 1677 万 7216 色 を 扱え る と いう こと に な り ま す 。 


#rrggbb 方 式 に よる 指定 

と ころ が コン ピュ ー タ で は 情報 は すべ て 0 と 1 の 2 進 法 で 表現 され る た め 、 数 値 を 2 進数 で 表 
そう と する と 桁 数 が 非常 に 長く な り が ち で す 。 そ こ で 2 進数 の 4 桁 を まとめ 、16 進数 (0 一 9 の 
10 種類 の 数 字 に af の 6 種類 の アル ファ ベッ ト を 加え 、16 ご と に 桁 が あがる 方 式 ) で 数 値 を 表 
記す る よう に な り ま し た 。 

色 指 定 値 (#rrggbD) 方 式 で の 記述 方 法 は この 16 進数 表記 に し た が っ た も の で す 。 

「#] に つづ け て 、 赤 (red)、 緑 (green)、 青 (blue) の それ ぞ れ の 割合 を 2 桁 の 16 進数 
(00~f) で 表現 し 、 色 を 指定 し ます 。 

た と えば 、 赤 =51、 緑 =102、 青 =255 の 色 を 16 進数 で 表す と 、 赤 =33、 緑 =66、 青 =ff と い 
う 指定 と な り 、 色 指定 値 は 「#3366ff] と な り ま す 。 

いく つか の 色 に つい て は 実際 の 打 rggbb の 値 を 掲載 し て いま す の で 参考 に し て くだ さい 。 ま た 、 
10 進数 と 16 進数 の 対応 表 も 掲載 し まし た の で (p.111)、 こ の 関係 を 比較 し て みる と よい で し ょ 
う 』 

な お 、 も ちろ ん コン ピュ ー タ 内 部 で は すべ て の 数 字 を 2 進数 に 置き 換え て 処理 し て いる こと に 
は 変わ り が あり ませ ん 。 


gb 方式 に よる 指定 

「 提 に つづ け て 、 赤 (red)、 緑 (green)、 青 (blue) の それ ぞ れ の 割合 を 1 桁 の 16 進数 (0 
ーf) で 表現 し 、 計 3 桁 で 色 を 指定 し ます 。 

この 方 法 で は rgb 各 桁 を 2 つ 繰り 返し て 並べ た 6 桁 の 形式 (rggbb) に 変換 され て か ら 色 が 
表現 され ます 。 た と えば 「 導 DO0] と いう 値 は 「 寺 fDbD00」 と いう 値 に 変換 され る こと に な り ま す 。 


rgb(n,n,n) 方式 に よる 指定 
rgD に つづ く 「0」 の 中 に 赤 (red)、 緑 (green)、 青 (blue) の それ ぞ れ の 値 を 「,」 で 区 切っ 
て 0 か ら 255 の 10 進数 の 整数 で 指定 し ます 。 


rgb(n%,n%,n%) 方式 に よる 指定 
rgD に つづ く 「0」 の 中 に 赤 (red)、 緑 (green)、 青 (blue) の それ ぞ れ の 値 を 「,」 で 区 切っ 
て パー セン ト で 指定 し ます 。 
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Web Safe カラ ー 

256 色 の 8 ビッ トカ ラー の うち Windows と Macintosh の シス テム パレ ッ ト に 共通 し た 216 
色 で 、Intemet Explorer と Netscape で も ほぼ 同じ よう に 表示 され る 色 を Web Safe カラ ー と 
いい ます 。 こ れ ら の 色 は 16 進数 で 表現 し た 場合 、RGB の 各 値 が 00、 33、66、99、cc、ff の 
組み 合わ せ か ら で き て いま す 。Web Safe カラ ー を 使え ば 、 た と え ユ ー ザ ー の 環境 が 256 色 表 示 
で あっ て も 比較 的 問題 な く 正 し く 表 示さ れ ま す が 、 こ れ 以 外 の 色 を 使っ た 場合 は 自動 的 に ディ ザ 
リン グ 処 理 (近い 色 に 置換 えら れる ) され る こと に な り 、 意図 し た と お り の 色 で 見 て も ら え な 
く な る 可能 性 も ある の で 注意 が 必要 で す 。 

下記 の 図 は Web Safe カラ ー を 電 fffff か ら #000000 の 明度 の 異な る グレ ー を 基準 に し て 色相 
環状 に 配列 し た も の で す 。 


/ \ 
Ui EEEEUW こ = 
(3300ff) 一 (80033 作 


N 
Ui 





4 #fff を 基準 と し た Web Safe カラ ー の 色相 環 
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納 ae 
#cc0066 )ー 。 jcc6699 
3 _We399 #c99cc 
#cc0099 #cc66cc 
WC33cc 


#cc00cc 
EEIUUS 
#6600cc 
EEEEIU り 
ECI りり #669900 


(た た 1 りり 
#990000 


の し た ひよ より 
#990033 #996666 


W993366 


#999999 ん #666600 
(ECIUUJ #996699 N / #663300 #663300 
993399 #660000 #006600 
EEUUUU #663399 ) ey) #336633 ) 
#660033 #666666) 一 一 #006633 


JIU り リリ 








#999933 た た た りり リ 全 #CCccccC を 基準 と し た Web Safe カラ ー の 色相 環 


#996633 


いり よ た 1 


人 #999999 を 基準 と し た Web Safe カラ ー の 色相 環 #000066 






人 #666666 を 基準 と し た 
Web Safe カラ ー の 色相 環 


りり りり リリ 





の 人 人 #333333 を 大 準 と し た 


Web Safe カラ ー の 色相 環 全 #O00000 
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色 名 に よる 指定 

色 名 (colorname) を キー ワー ド と し て 色 を 指定 する こと も で きま す 。 

この 場合 は { color: red } の よう に 色 名 を 値 に 直接 記入 し ます (「"」 で 囲ま な いよ うに 注意 し て 
くだ さい )。 こ の 場合 、 大 文字 小文字 は 問い ませ ん 。 正式 に 使用 で きる 色 は 文 印 の つい て いる 16 
色 (p.342 参照 ) だ け で す が 、 そ れ 以 外 で ブラ ウザ が 対応 し て いる 色 も あり ます 。 








rb(240.255.240) 


#dcdcdc rgb(220,220,220) 
#d3d3d3 rgb(211,211,211) 


rgb(192,192.192) 







rgb(255,250,240) dimgray #696969 rgb(105,105,105) 


mintcream 5fffa 。 rgb(245,255,250) 


darkslategray #2f4f4f rgb(47,79,79) 


『+ 
ghostwhite 針 8f8ff rgb(248,248,255) FiUUUUUU 且 還 ui(UUUU り ) 





























cadetblue 

steelblue 
olivedrab #6b8e23 rgb(107,142,35) aquamarine 
darkoliveqreen  #556b2f rgb(85,107,47) Powderblue 
forestqreen #228b22 rgb(34,139,34) paleturquotse 
darkqreen #006400 rgb(0,100,0) lightblue 
し 

#008000 rgb(0,128,0) lightsteelblue 

en eee Ge の 5 
meemwagear foda7i MO379119) BWRRAUN9 
。 engeen 。 ameeo nhG442840 NEMAs 
eeen Mama nbG522515 oct 

し 3 

aqua 








#4682b4. 


#7ffd4 


#b0e0e6 


#afeeee 


#add8e6 


#bOc4de 


#87ceeb 


#87cefa 


#48d1cc 


#40e0d0 


#00ced1 


#00ffff 


し 3 
PIT 
darkcyan #008b8b rgb(0,139,139) 


- mee70 





rgb(95.158.160) 


rgb(70,130,180) 


rgb(127,255,212) 


rgb(176,224,230) 


rgb(175,238,238) 


rgb(173,216,230) 


rgb(176,196,222) 


rgb(135,206,235) 


rgb(135,206,250) 


rgb(72,209,204) 


rgb(64,224,208) 


rgb(0,205,209) 


rgb(0,255,255) 
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LEIU り UI 


darkred 


brown 


HI 


saddlebrown 


tomato 


sandybrown 


lightsalmon 





りり リリ リ 


1 りり りり リリ 


[上 ナオ 『 ナ | 


#a0522d 


#8b4513 


#fa8072 


#e9967a 


#ff6347 


才 4a460 


才 fa07a 
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re 4: 及 只 り ) 


rgb(139,0,.0) 





rgb(165,42,42) 


rgb(160.82.45) 


6 上 月 表し 





rgb(240,128.128) 


orangered #ff4500 rgb(255.69.0) 


Orange #fa500 rgb(255,165,0) 


darkorange #ff8c00 rgb(255,140.0) 


mn gb4ec me10e040) 
peachpuff #ffdab9 rgb(255,218,185) 
bisque #ffe4c4 rgb(255,228,196) 
moccasin #fe4b5 rgb(255,228,181) 


navajowhite #ffdead rgb(255,222,173) 


wheat #f5deb3 rgb(245,222,179) 


burlywood #deb887 rgb(222,184.135) 


rgb(233,150.122) 


rgb(255,127.80) 


rgb(255.9971) 


rgb(244,164.96) 


rgb(255,160,122) 





gold #ffd700 rgb(255,215,0) 


yellow 財 ff00 rgb(255,255,0) 


lightgoldenrodyellow #fafad2 rgb(250,250,210) 


palegoldenrod #eee8aa rgb(238,232,170) 


khaki 角 Oe68c rgb(240,230,140) 





plum #dda0dd rgb(221,160,221) 








#d8bfd8 rgb(216,191,216) 


orchid #da70d6 rgb(218,112,214) 


に 3 
ビ ョ 
に 
に 


Violet #ee82ee rgb(238,.130,238) 











FiUUUUi 細 (UE)) indigo #4b0082 rgb(75,0,130) 

mediumblue EiUUUU 還 語り (中 りり 4)) darkmagenta #8b008b rgb(139,0,139) 
し 3 

ED/ FUUUUU:1U 証 (生け は) Purple #800080 rgb(128,0,128) 

EIJIH #00008b rgb(0,0,139) 

midniqhtblue #191970 rgb(25,25,112) deeppink #f1493 rgb(255,20,147) 

EIMGEI(dJ(( ゴ #483d8b rgb(72,61,139) fuchsia #ffOOff rgb(255,0,255) 

EIJIU(4 #6a5acd rgb(106,90,205) magenta #ffOOff rgb(255,0,255) 

mediumsateblue #Oe00b0 rgb(14,0,176) hotpink 角 f69b4 rgb(255,105,180) 













aa gem mmG550200 lightpink #ffb6c1 rgb(255,182,193) 
Mt Mama Ge4220 AE 民 吉 #ffe4e1 柏 半生 0 
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シス テム カラ ー に よる 指定 

スタ イル シー ト で は 、Windows や MacOS が 保持 し て いる シス テム 情報 を 呼び 出す こと が で 
きま す 。 こ の シス テム カラ ー を 使う こと 、 ペ ー ジ を 見 る 人 の OS の 環境 に 合わ せ て 使用 色 を 決め る 
こと が で きま す (Dp.48 参照) 。 

シス テム カラ ー に は 以下 の キー ワー ド が あり ます 。 


activeborder アク ティ ブ な ウィ ンド ウ の 枠 の 色 
activecaption アク ティ ブ な ウィ ンド ウ の タイ トル バー の 色 
appWorkspace アプ リケーション 内 の ウィ ンド ウ の 背景 色 
backqround デス クト ッ プ の 背景 色 
buttonface 立体 的 ボタ ン の 表面 の 色 
buttonhightight 立体 的 な ボタ ン の 光 の あたっ て いる 面 の 色 
buttonshadow 立体 的 な ボタ ン の 影 に な っ て る 面 の 色 
buttontext 立体 的 な ボタ ン の テキ スト の 色 
captiontext タイ トル バー の テキ スト の 色 
qraytext 選択 で き な い テキ スト の 色 
highlight 選択 し て いる 状態 の 色 
highiighttext 選択 し て いる テキ スト の 色 
inactiveborder アク ティ ブ で な い ウ ィ ン ド ウ の 枠 の 色 
inactivecaption アク ティ ブ で な い ウ ィ ン ド ウ の タイ トル バー の 色 
inactivecaptiontext アク ティ ブ で な い ウ ィ ン ド ウ の タイ トル バー の テキ スト の 色 
infobackqround ツー ル チ ッ プ の 背景 色 
infotext ツー ル チ ッ プ の テキ スト の 色 
menu メニ ュー の 背景 色 
menutext メニ ュー の テキ スト の 色 
scrollbar スク ロー ル バ ー の 色 
threeddarkshadow 立体 的 に 表示 され る 部 分 の 暗い 影 の 色 
threedface 立体 的 に 表示 され る 部 分 の 表面 の 色 
threedhighlight 立体 的 に 表示 され る 部 分 の 光 の あたっ て いる 面 の 色 
threedightshadow 立体 的 に 表示 され る 部 分 の 明る い 影 の 色 
threedshadow 立体 的 に 表示 され る 部 分 の 影 の 色 
window ウィ ンド ウ の 背景 色 
windowframe ウィ ンド ウ の フレ ー ム の 色 
windowtext ウィ ンド ウ の テキ スト の 色 

transparent の 指定 


プロ パテ ィ に よっ て は transparent (透明 ) を 指定 で きる も の も あり ます 。 transparent を 指 
定 す る と その 領域 は 透明 に な り 、 結 果 と し て その 要素 が 含ま れる 親 ボ ックス の (つま り 下 の ) 内 
容 や 背景 ・ 背 景 画像 な ど が 透け て 見 える よう に な り ま す 。 





16 進数 対応 表 UL エド ミド ミミ ミミ ミオ ミミ トメ ミミ ミミ ミミ ミミ ミミ トミ ミミ ミミ メル トド トト KSMKRIIKYELKERRRRRIRXI】 


10 進数 と 16 進数 の 対応 表 で す 。 色 を 表す 256 段階 の 数 値 (左側 ) は 、16 進数 で 表す と 右側 の 数 値 と 
な り ま す 。 赤 字 の 部 分 は Web Safe カラ ー を 構成 する 数 値 で す 。 


ar er ーーーーーーーーー ィ ーーーーーー 


10 進数 | 16 進数 0 避 数 | 16 進数 届 0 半 数 | 16 進数 還 0 計 数 16 才 財 計 16 進数 詳 計 数 | 16 進 数 証 0 玲 導 16 進数 計 0 数 | 16 進数 


oo 駐 琶 zo 記 縛 <o 還 王 co 置 5 吐 so 6 目 zo 画 9 中 co 馬 呈 旧 co 
01 縛 隊 織 21 入 開 諾 421 回 間 識 61 映 症 較 81 環 席 華 a1 議 明 華 c 能 呈 症 

















02 a2 還 9 人 | c2 劇 286| ez 
03 33 敵 間 織 c3 疫 症 e3 
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モニ タ と 印刷 の 色 の 違い COCCOCUUULULMLULLLMLLLTKKKIKKKKKKTLLKKKITXLXXXXXXXKKKXKI 


原理 的 に 、 印 刷 で は Web 上 (モニ タ で 見 る 色 ) の 色 を 完全 に 再現 する こと は で きま せん 。 こ こ に 記載 
され た 色 は あく まで も 参考 に と ど め 、 実際 に お 使い に な る 場合 は 、 モ ニタ 上 で 色 を 確認 し て くだ さい 。 ま 
た 、 細 か い 色 の ニュ アン ス は 、Web ペー ジ を 見 に 来る 人 の モニ タ の 環境 に よっ て 大 きく 異な る 場合 も あ 
る の で 、 注 意 が 必要 で す 。 
な お 、 本 書 の Web ペー ジ で は 、 こ こ に 掲載 し て いる カラ ー チ ャ ー ト を 実際 に Web 上 で ご 覧 いた だ く 
こと が で きま す 。 
http://www.shoeisha.com/book/pc/dic/ 
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2 APPENDIX 





ここ で は 、Web の 配色 を 考え る 際 に 参考 に な る 、 色 に 関す る 基本 的 な 知識 を 紹介 し ます 。 


@⑯ 色 の 属性 


色 の 属性 に つい て 理解 し て お く と 、 配 色 を 考え や すく な り ま す 。 色 に は 「 色 相 ]「 明 度 」「 彩 度 ] 
の 3 つの 属性 が あり ます 。 





色相 

白 一 灰色 一 黒 を 無 彩 色 と い い 、 そ れ 以 外 の 色 を 有 彩 色 と 言い ます 。「 色 相 」 と は 、 そ れ ぞ れ の 有 
彩色 が 持つ 色合い の こと で す 。 似 た 色相 を 隣 合わ せ に 並べ て いく と 、 色 の 輪 が で きま す 。 こ れ は 
「 色 相 環 ] と 呼ば れ 、 こ の うち お お よそ 赤 一 黄 の 範囲 の 色 を 「 暖 色 」、 緑 一 青 の 範囲 の 色 を 「 寒 色 」 
と 表現 し て いま す 。 

色相 環 上 で 、 相 対す る 位置 に ある 色 を 「 補 色 ]」 と いい ます 。 補色 関係 に ある 2 色 を 並べ る と 、 
強い 対比 が 生じ 、 緊 張 感 の ある は っ きり し た 配色 に な り ま す 。 ま た 、 色 相 環 上 で 約 120 度 の 位置 
に ある 色 を 「 準 補色 ] と いい ます 。 補色 に よる 配色 で は ど ぎ つい と いう 場合 に は 、 準 補色 同士 を 
並べ る と 、 ゆ る や か な 対比 を 作る こと が で きま す 。 





人 色相 環 上 で 相対 する 位置 に ある 2 色 を 、「 補 色 関 係 に ある 色 」 と 
いい ます 









明 民 

「 明 度 ] は 色 の 明る さ の 度合 い の こ と で 、 白 か ら 黒 まで の グレ ー ス ケー ル を 基準 と し て いま す 。 
白 に 近づく ほど 明度 は 高く 、 黒 に 近づく ほど 明度 は 低く な り ま す 。 た と えば 、 赤 に 白 を 混ぜ た ピ 
ンク は 、 元 の 赤 よ り 明 る い 色 ( 二 高 明度 ) で す 。 一 方 、 赤 に 黒 を 混ぜ た 茶色 は 、 元 の 赤 よ り 暗 い 
色 ( 三 低 明 度 ) に な り ま す 。 

また 、 純 色 ( 彩 度 が 最高 の 色 ) の 赤 と 黄 を グレ ー ス ケー ル に 置き 換え て みる と 、 黄 より 赤 の 方 
が 暗い 灰色 に な り ま す 。 こ の よう に 、 同 じ 彩 度 で あっ て も 、 色 相 に よっ て 明度 は 異な り ます 。 








色 の 各色 を 基準 と し た 明度 の バリ エー ショ ン 





円 マ こ れ を グレ ー ス き 換え て みる と 、 彩 度 が 同じ 
遇 で も 色 に よっ て 明度 が 異な る こと が わか り ま す 
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彩 度 

「 彩 度 ] は 色 の 鮮やか さ ( 色 み の 強 さ ) の 度合 い の こ と で 、 無 彩色 の 彩 度 は 0 に な り ま す 。 純 色 
の 赤 に 白 や 黒 な どの 無 彩色 を 混ぜ て いく と 、 だ ん だ ん 色 み が 薄れ て 無 彩色 に 近づき 、 彩 度 は 低く 
な っ て いき ます 。 混色 され た 無 彩 色 の 分 量 が 少な く て 純 色 ( 彩 度 が 最高 の 色 ) に 近い ほど 色 み が 
強く 、 彩 度 は 高く な り ま す 。 





全 無 彩色 の 混色 が 少な い ほど 彩 度 が 高く な り ま す 。 こ の 図 で は 、 右 上 が も っ と も 彩 度 の 高い 色 で す 


⑯ 色調 (トーン) 





色 の 3 つの 属性 を 総合 し て 、 色 の 分 布 を 示し た 図 を 「 色 立体 ] と いい ます 。 色 立体 の 中 か ら 、 
ある 色相 に 関す る 部 分 を 取り 出し 、 明 度 ・ 彩 度 に 応じ て 分 類する と 、1 つの 色相 内 の 色 は 次 の よう 
な 色調 (トー ン ) の グル ー プ に 分 ける こと が で きま す 。 


< 派手 ” ビビッド 
* 明 る い ブラ イト 、 ペ ー ル 、 ベ リー ペー ル 

* 地 味 ライ ト グ レ イッ シュ 、 ラ イト 、 グ レイ ッシュ 、 ダ ル 
< 暗い ディ ー ブ 、 ダ ー ク 、 ダ ー ク グレ イッ シュ 


異な る 色相 の 色 を 組み 合わ せ て 配色 を 行う 際 に は 、 各 色 の 色調 を 揃え て お く と 上 手 く まとめ る 
こと が で きま す 。 


354 反 の 基礎 知識 






図 の 





「 明 度 」「 彩 度 ] の 関係 は 、 


よう な 色 立 体 で 表す こと が で きま す 


人 「 色 相 ] 
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度 と 彩 度 を 組み 合わ せ た 「 色 の 調子 」 を 「 色 調 (トー ン )」 


と いい ます 
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3 4 リロ リル 





Web ペー ジ を みる と き 、 ま っ さき に 目 に 飛び 込ん 々 で くる の は 、 コ ン テ ン ツ よ り も まず ペー ジ の 
「 色 ] で は な いで し ょ うか 。 初め て 会 う 人 の 服装 か ら 第 一 印象 が 決ま る よう に 、 私 た ち は 、 ま ず 色 
を みて Web ペー ジ の 印象 を 決定 し ます 。 作 り た い Web ペー ジ の イメ ー ジ を 明確 に し 、 効 果 的 な 
配色 を 行う こと で 、 サ イト の 主旨 が は っ きり し 、 よ り 深 く コ ン テ ン ツ を 理解 し て も ら う こと が 可 
能 に な り ま す 。 


⑯ 赤 ^ 黄 系 の 配色 


赤 一 黄 系 は 、「 暖 色 ] と 呼ば れる 色 の 系 統 で す 。 一 般 に 暖色 系 の 色 は 、 外 向 的 で 生命 や 情熱 、 親 
し さ な ど を 象徴 し ます 。 熱量 を 感じ させ 食欲 を そそ る 色 で ある た め 、 飲 食 関連 の WeD ペー ジ に は 
欠か せま せん 。 

特に 赤色 は 「 災 ] や 「 血 ] を 連想 させ 、 エ ネル ギー や 生命 力 に 溢れ た 色 で す 。 闘争 心 ・ 勇 気 ・ 
興奮 な ど を 伝え る 一 方 、 熱 狂 や 怒り な どの 不安 定 な ニュ アン ス や 、 強 い 禁 止 を 表す た め に も 利用 
され ます 。 

黄色 は 「 光 」 を 連想 させ る 色 で ある た め 、 陽 気 で 健康 な イメ ー ジ 、 幸福 感 を 表し ます 。 ま た 人 金 
色 に 近い た め 、 華 や か さや 高綱 さ 、 派 手 さ を 表す 色 で も あり ます 。 

中 間 の オレ ンジ 色 は 、 赤 色 ・ 黄 色 の 両方 の 性 質 を 持っ て いま す 。 強 い 主張 の 中 に 親しみ や すさ 
や 爽快 感 が 加わ り 、 赤 色 よ り も や わら か い 印 象 に な り ま す 。 





ト 色 の 配色 
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人 同系 色 に よる 配色 は 、 全 体 を まとめ や すく 、 落 ち 着 いた 印象 に な 
り ま す 





eo 2 | MA We eee 


人 補色 を 加え る と 、 ポ イン ト が 強調 され 、 躍 動 感 が 生ま れ ま す 





本 CE ET ee 0 


全高 明度 ・ 高 彩 度 の 同系 色 で まとめ る と 、 明 る く 穏 や か な 印象 に な 
り ま す 


人 明度 差 や 補色 を 利用 する と 、 強い 主張 が 感じ られ る よう に な り ま す 








@ 緑青 系 の 配色 


緑青 系 は 、 「 窯 色 ] と 呼ば れる 色 の 系 統 で す 。 暖色 に 比べ て 内 向 的 で 、 理知 や 抑制 を 象徴 し ます 。 

緑色 は 、「 植 物 」 の 色 。 草木 を 見 る と 心 が な ご むように 、 緑 色 に は 穏やか で 落ち 着い た 雰囲気 を 
作る 効果 が あり ます 。 ま た 、 新 緑 の 季 節 の よう な 清涼 感 や 、 新 鮮 な 野菜 、 自 然 界 の バラ ンス な ど 
も 連想 させ ます 。 中 唐 で 安定 し た 印象 の た め 色 自 体 の 自己 主張 は 少な く 、 ポ イン トカ ラー を 引き 
立て る ベー スカ ラー と し て 機能 する こと が 多く な っ て いま す 。 

自然 界 の どこ で で も 目 に する よう で いて 、 実体 を 持つ 青い も の は 少な いこ と か ら 、 青 色 に は 抽 
象 的 で さま ざま な イメ ー ジ が 託さ れ ま す 。 ま ず 、「 空 」 や 「 海 ] の 色 で ある こと か ら 、 先 快感 、 広 
が りや 永遠 、 穏 や か さ 、 神 秘 性 な ど が 連想 され ます 。 フ レッ シュ で スポ ー テ ィ な 色 で あり 、 ノ ー 
ブル 、 フ ォ ー マ ル を な 象徴 し 、 憂 鬱 や 悲壮 感 を 表す こと も あり ます 。 こ の よう に イメ ー ジ に 幅 は あ 
り ま す が 、 青 色 は 理性 や 冷静 さ が 基 本 と な っ て いま す 。 
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全 同 系 色 に よる 配色 は 、 全体 を まとめ や す く 、 落 ち 着い た 印象 に な 
り ま す 





#0066cc 6 
ee 本 の 6 


全 全 色相 に よる 配色 を 取り 入れ る と 、 明 る く 賑 や か な 印象 に な り ま す 





全 彩 度 の 高い 清 色 を 組み 合わ せる と 、 若 々 し く ス ピー ド 感 が 生ま れ 
ます 





た た 1 り よ よ 】 996 


明度 ・ 彩 度 が 低く な る ほど 、 枯 れ て 地味 な 印象 に な り ま す 
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@ 紫 ~ 赤 紫 系 の 配色 


自然 界 に 少な い 紫 色 は 、 古 来 より 神秘 性 や 非 日 常 性 、 高 買 さ を 表す 色 と し て 扱わ れ て きま し た 。 
権力 を 象徴 し 、 退 廃 や 糞 熟 、 病 的 、 狂 気 を 表す 色 で も あり ます 。 高級 感 や 気品 、 優 雅 さ 、 華 麗 な 
ど 、 大 人 っ ぽく 色気 の ある イメ ー ジ を 持ち ます が 、 多 用 し すぎ る と 、 反 対 に 下品 、 陰 気 、 派 手 、 
くど い 、 怪 し いな どの マイ ナス イメ ー ジ を 作る こと に な る の で 注意 が 必要 で す 。 紫色 の 中 で も 、 
赤み の 深い ワイ ン 色 な ど は 豊か な 実り を 連想 させ ます が 、 明 る く 派 手 な 紫色 は 食品 関連 で は 好ま 
れ ま せん 。 
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#6666ff EiUUUUi JI りり Ui : よ た た た 1q コ りり UIUed また 1 


#9966ff ECUUUii 0 ドル た ト 1 ied #9900cc 


#ff66ff #ff00ff 時 f00cc 











66ff #ff9900 #0066ff #ccff00 #0066ff 計 f0000 


ff loooof 
だ PUUUI だ UUUII #9900ff #ffff00 


の パリ エー ショ ン 


#O00000 #003366 #0033cc #0066ff #6699ff #99ccff fffff 





りり Ui 填 f6600 





ミ 




















L 

#O00000 #000066 #0000cc #0000ff #6666ff #Ccccff #fffff 
@ @ 
1 ! 

#000000 #330066 #6600cc #9900ff #cc66ff #cc99ff ffFf 
L @ の @ 
『 『 8 

#O00000 #660066 #CcOOcc #ffOOff #ff66ff #ff99ff fffff 
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OO PV REOW と 20 H eeee bgcolor #ccffff text #eeff33| iink 


vink fee33 aiink 


Buon Giornol! 





Ei 天上 bgcolor ##ffcccc text 且 記 
Buon Ciorno!! eo viink  ##fff99 atink 


まま EKIU り 1d bgcolor #Geff66| text Eo 
#ceec99 viink 関 較 … 





2O 5 の PP PO YO 2 #ccccff bgcolor 記名 text fm link 
Buon Ciornol!! LEIvink Hffffff !atink 
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人 白地 に よっ て 、 す っ きり し た 印象 に な り ま す 


UIUULI 5 に に よ た 1 


全 団 系 の 同系 色 で 明度 差 の な い 配 色 は 、 重 苦し い 感 じ に な り ま す 


#ccccff  #cccccc  #ffffcc | fff 1 #ffcccc 


= | 思 世 


cs pere 
全高 明度 の 配色 は 、 広 い 色相 を 取り 入れ や すく な り ま す 


Cewm 


パウル ペー スト ジェ ノバ 過 





ec #ffcccc 


全 純 色 に 近い 色調 で 広い 色相 を 用 いる と 、 雑 然 と し た 印象 に な りや 
すく な り ま す 
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@⑯ 渡 暗 色 系 の 配色 


濃 暗色 は 、 彩 度 や 明度 が 低い 色 で す 。 彩 度 ・ 明 度 に よっ て 「 ダ ー ク 系 」「 ダ ル 系 」 「 グ レイ ッ シ 
ュ 系 ] な ど に 分 類 さ れ ま す 。 濃 暗色 系 の 中 で も 、 彩 度 ・ 明 度 が 比較 的 高い 、 や や くす ん だ 感じ の 
色 は 、 自 然 界 で 目 に する こと の 多い 色調 で ある た め 、「 ア ー ス カラ ー」 と も 呼ば れ ま す 。 

濃 暗 色 の 配色 は 、 一 般 に 重く 鈍い 印象 を 与え ます 。 主 に 男性 的 で 年 齢 層 の 高い 印象 の 色 で 、 重 
厚 ・ 渋 み ・ 伝 統 な どの イメ ー ジ を 伝え る 場合 に は 欠か せま せん 。 一 方 、 配 色 に よっ て は 、 暗 い ・ 
寂し い ・ 地 味 な どの マイ ナス イメ ー ジ を 作る こと に も な り ま す 。 ま た 、 彩 度 ・ 明 度 が 低く な る ほ 
ど 無 機 的 な 印象 に な る た め 、 モ ノ ト ー ン 系 の 性 格 も 含 お よう に な り ま す 。 
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リト た た 】 #660000 いよ た 1 りり た た よ よ た 1 ルル リリ リリ #996600 


#666633 た 1 リリ #006600 #669966 た よ よ より リリ ルル た 


#336666 #006666 リト た 1 #669999 #009999 #003399 


: た た た た 1 1] また 1 りり リコ #660066 #996699 #660099 た りり) 











ee3300 。 #ooooes 





#660000 #003366 













た た 1 りり #660066 





#006666 1 よ ト 1 リリ 


まま 1 りり #006600 








@ 
#660000 #cc9999 』Tfffff 








333300 #663300 #c9999 


#ffffff 
k 。 上 抽 馬 生 近 1 
#O00000 #003333 #006666 #99cccc #Tffff 
bk  。  。 。 請 馬 馬 詳 H 
#O00000 #330033 #330066 #9999cc #ffffff 
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OO の W りり 妥 bqcolor 提 fcccc text Hff6666』 iink 


押 f9999 viink eff66| aiink 


還 証 … #ffffff text #fec00」iink 


#cecc99 viink fff00 alink 


1 よ 上 bgcolor #cccff text 導 f99ce link 
Buon Ciorno!! #e99ff| viink 間 


YO SYO KRO AD 2 EE bacolor ae text #ccff99 link 
Me vlink | #ffffff !alink 


Web 配色 サン ブル 


#666699 : よ りり | cc9999 





粒 30066| iffff 





全 彩 度 が 高く 、 明 度 が 低い 配色 は 、 円 熟し た 雰囲気 を 作り ます 





POR ーー #660066 


#990033 49 


度 の 色 を 、 補 色 に 近い 対比 で 組み 合わ せる と 、 和 風 
また は エス ニッ ク 風 の 配色 に な り ま す 








ek 回 cd ! 了 
#669999 


人 青 系 の 暗色 に は 、 一 般 ( 





Primo Piatto 





協 性 的 な イメ ー ジ が あり ます 


Web 配色 サン ブル 371 
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⑯ 淡 明 色 系 の 配色 





淡 明 色 系 は 、 濃 暗色 系 と は 反対 に 、 彩 度 や 明度 が 高い 色 で す 。 彩 度 ・ 明 度 に よっ て 「 ラ イト 系 」 
「 ペ ー ル 系 ] 「 ラ イト グレ イッ シュ 系 」 な ど に 分 類 さ れ ま す 。 淡 明 色 系 の 中 で 彩 度 ・ 明 度 が 比較 的 
低い 色 も 、「 ア ー ス カラ ー」 に 含ま れ ま す 。 

淡 明 色 系 の 配色 は 、 軽 や か で 柔らか い 印象 を 与え 、 女 性 に 好ま れる 色調 で す 。 明 度 が 非常 に 高 
く 白 に 近い ベー ジュ な どの 色 は 、 個 性 は 少な いも の の 、 安 心 感 が あっ て 受け 入れ られ や すく 、 上 
品 で や さ し い 印象 を 作る こと が で きま す 。 一 方 、 淡 明 色 だ け で コン トラ スト の 少な い 配 色 は 、 
弱 々 し く あ いま いな 印象 に も な り ま す 。 





同系 色 の 配色 


fffcc fff99 











明度 の バリエーション 
* * * 
#999999 #Cccc99 #ffff99 #Tfffcc #fffFfff 
EE] : 
#999999 #99cccc #99ffcc #Ccffcc #ffffff 





#999999 #9999cc #9999ff #fffFff 





#999999 #Cc99cc #Tfffff 


iink 


アイル の 邊 0D 半生 ② お WEAD⑭ ウー ん OD へ M プ O 遇 Hink 





Mcccf bgcolor eeee text Jeee Hink 
ee eo を 





fffcc bgcolor Joeeo text ee link 
Buon Giorno!! 29999 viink eo aHink 


as 





Motor Car 


shtectere 


Ag mem 














全 彩 度 ・ 明 度 の 高い 色 と 白 を 組み 合わ せる と 、 若 々 し い 印 象 に な り 
ます 








Eb ^ 彩 度 が 低く 、 明 度 の 高い 配色 は 、 や わら か く 落 ち 着い た 印象 に な 
り ま す 


hm 


全 淡 明 色 系 の 配色 は 、 明 る く 女 性 的 な イメ ー ジ を 作る こと が で きま す 





人 彩 度 が 低く 、 明 度 差 の 少な い 配色 は 、 あ いま いで の ん びり と し た 
雰囲気 に な り ま す 





375 





⑯ モノ トー ン の 配色 


無 彩 色 の 白 ・ 黒 ・ グ レー は ニュ ー ト ラル な 色 な の で 、 ど ん な 色 と で も 組み 合わ せる こと が で き 、 
配色 に よっ て 印象 が 変わ り ます 。 有 彩色 を 加え な い モ ノ トー ン の 配色 は 、 モ ダン で 大 人 っ ぽい イ 
メー ジ に な り ま す が 、 バ ラン ス に よっ て は 暗く 寒々 し い 印 象 を 与え る こと に も な る の で 注意 が 必 
要 で す 。 

単色 の 場合 、 白 は 清潔 ・ 清 惑 ・ 生 れ が な い ・ 催 いな どの キー ワー ド を 連想 させ ます が 、 基 本 的 
に マイ ナス イメ ー ジ は 少な い 色 で す 。 反対 に 、 黒 は 夜 ・ 暗 闇 ・ 恐 怖 ・ 死 ・ 絶 望 な ど 不吉 な も の を 
象徴 する 一 方 、 洗 練 さ れ て シャ ー プ な 印象 を 与え る 色 で も あり ます 。 グ レー も シッ ク で 落ち 着い 
た 印象 の 色 で す が 、 使い方 に よっ て は 地味 で 陰気 な イメ ー ジ と な り ま す 。 


明度 の パリ エー ショ ン 





#000000 #333333 #666666 #999999 #Cccccc #fffff 
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3 サン フル) ー Men me 


カイル 諸表 0 お WEAD⑯ うー ル GD へ M20 


Buon Ciornol!! に #Cccccc alink 











AO PS SPY NAS 0202 #ccccc bgcolor 語 計 りり dd text EE りり 1 link 
Buon Giorno!! 96 viink 計 KWEE alink 


CO PO YY 1 bqcolor text ee iink 
fffcc viink ES alink 





AE 軸 り りり りり bacolor Je text eeeee iink 
#ccffcc vink に 本 
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^ 無 彩色 に よる 配色 は 、 寒 々 し い 印 象 に な る こと が あり ます 


Prmo Piatto 


人 黒 を 基本 色 と す る と 、 強 い 主 張 が 感じ られ る よう に な り ま す 


人 モノトーン の 配色 は 、 有 彩色 と の 組み 合わ せ に よっ て 印象 が 変化 
し ます 


たよ 111vd #Cccccc ee Hfffff 」 


人 補色 の 間 に 無 彩 色 を 置く と 、 す っ きり し た 対比 に な り ま す 
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ビジ ュ ア ルイ ン デ ックス 


ビジ ュ ア ルイ ン デ ックス で は 、 本 書 に 掲載 し こい る スタ イル シー ト を 利用 し た サン プル ペー ジ 
を ご 紹介 し ます 。 

実際 の Web ペー ジ で は 、 未 対応 ブラ ウザ へ の 配慮 や ブラ ウザ や バー ジョ ン に よっ て 生じ る バグ 
(不具 合 ) の 回 避 策 な ども 考慮 に 入れ る 必要 が あり ます 。 こ こ で は 実例 と し て 各種 の バグ 回 避 策 も 
講じ て いま す の で 参考 に し て くだ さい 。 








ロ 











HTML 文書 内 の 冒頭 部 分 に 、<style> タブ で スタ イル シー ト を 設定 する サン プル で す 。 本 書 リ 
ファ レン ス 部 分 の サン プル ソー ス は この 形式 で 記述 され て いま す . 


Guest DJ UuM-D 


Resident DJ's Tale . Motoko 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html lang="ja"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_JIS"> 


ーーp.51 





<meta http-equiv=Content-Style-Type content="text/css"> 
<title>+++ キ ++ キ ++ Third Dream オキ キキ キュ ++</ title> 


p.10 





<style type="text/css"> 
< 
body { 
margin: 10px 28px: 
padding: 0px: 


ーーp.15 





backgroundi url("dot.gif") #006 repeat 
color: ff 


ht { 
margin-top: 0PxX: 
padding: 15px 
background: #000: 
color: 胡 作 
text-align: right: 
font-size: large: 
font-family: Georgia, "Times New Roman", Times, serif: 





border-bottom: f93 1px solid 


h2 { 
margin: 10px: 
padding-right: 5px: 
backqround: transparent: 
color: #666: 


一 Dp.157 


p.192 





text-align: right 


-p.69 





font-size: x-smalk 
font-family: Georgia, "Times New Roman", Times, serif: 
border: 93 1px solid 

} 

form { 
margin: 0px 
padding: 5Px 

} 

textarea { 
width: 450px: 


p.117 








background: 好 93 





color: #006: 

font-size: x-smalb 

border: 2 solid 骨 作 /* 【 注 意 1】 */ 
} 


p.157 





#Mg77oge 人 
text-align: center: 
backgqround: transparent 
color: 針 ff 
margin-top: 10px 
} 
#Mg7Se  { 
text-align: center: 
margin-top: 10pxX: 
border-top: #f93 1px solid 
} 
div.0ver { /* 全体 を 枠 線 で 囲う 2 た め の ス タイ ル [Over」 */ 
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-p.25 








border-style: solid: p.188 











border-width: 5px: P.174 
border-color: #000 p.182 
} 
div.5pegg/ 。 { p.25 
backqround: transparent: 
color: 盾 ff 


margin-top: 8Dx: 
margin-right: 15%: 
margin-left: 15%: 
text-align: left: 
font-weigqht: bold: 
font-size: small 

} 

div. 罰 7 { 
background: transparent: 
color: 時 ff 
margin-top: 5DxX: 
margin-right: 1596: 
margin-left: 159%: 
padding: 10px: 
text-align: right 
font-weiqht: normab 
font-size: x-small 


ー テ > 


</style> 
</head> 
<body lang= "ja"> 


<div class=" Over"> <!-ー===== 全体 を 枠 線 で 囲う スタ イル 「Over] 適用 =====--> 


<h1><img src="fryertitle.gif" width="250" height="36" alt="Third Dream"></h1> 
<div id="Mg 如 777gge"><imd src="fryer.gif" width="500" height="323" alt=""></div> 








<div id="Mg7pSty/e"> <!-- ===== ス タイ ル 「MainStyle」 適用 ===== --> P.25 
<div class="Spec7g/">Guest DJ UuM-D</div> p.25 
<form> 

<textarea rows="4" cols="50"> イ ギリ ス メ デ ィ ア で -…… (中 略 ) …… 体 感 し よう 。</textarea> 





</form> 
<div class="Spec7o/">Resident DJ 's Tale , Motoko</diV> 


<div class="7779"> 

Date:2002-XX-25(Sunday)<br>Open:2:00-24:00<br>Entrance Free:2.000-1drinksbr>Information:03-XX34-0XX<br> 
</div> 

</div> <!-- ===== スタ イル [MainStyle」 適用 ここ まで ===== --> 


<h2>CLUB Dream Event Information</h2> 


</div> <!--===== 全体 を 枠 線 で 囲う スタ イル 「Over」 適用 ここ まで =====--> 


</body> 
</htmlk> 





【 注 意 1】 本 来 は border: 2px solid 寺 ff の よう に 単位 を 書か な けれ ば 構文 的 に エラ ー で す が 、Netscape Navigator 4.x 
で は フォ ー ム の 要素 に これ を 指定 する と 表示 が くず れる と いう バグ が あり ます 。 そ の 対策 と し て ここ で は 単位 を 付け 
ず に 指定 する 方 法 を と っ て いま す 。 








スタ イル シー ト を 外部 記述 し た ペー 


フォ ー ム の HTML 文書 に 、 外 部 ファ イル に 記述 し た スタ イル シー ト を 読み 込む サン プル で す 。 
<head> タグ 内 部 の <link> タグ で 読み 込む 外部 ファ イル を 指定 し ます 。 





詩 次 世代 BtoC 戦 合 セ ミナ Microsoft Internet Explorer 
ファ イル (FE 編集 E) 表示 V) お 気 に 入 D⑱) ツー ル D ヘル プ (⑪ 


次 世代 BtoC 戦 略 セ ミナ 





| あな た の 会 社 は BtoC を 100%% 活 用 し て いま すか ? 


【 科 現在 | は 8 軸 ] ち と いわ れ て いる Bl 市場 で す が 、 米 国 は 胡 
料 業界 が 旧態 杖 と し た 「 オ ゴン ライ ンカ タロ グ 」 か ら 、 利 用 ユー 
ザー の 情報 最大 限 に 取り 入れ 、 個々 の 要求 に 対応 で きる 
シス テム を 打ち 出す な ど し て 成 J を 収め て いま す 。 

折 に 、 扱う 両 品 の 性 質 か ら 、 ネッ ト 利 用 者 の うち 、 半 吾 占 
め る 20 代 後半 か ら 30 代 前 半 の 届 こ ター ゲ ザット き 級 り 、 な か で 
も 女性 を 重視 し た 畔 本 に 喘 み 込ん だ , より 多く の ユー ザ 
ー き オン ライ ン シ ョ ッ ピ ング の 地 客 と し て 取り 込む 締 に な っ た 
と 思わ れ ま す 。 

日 本 で の ネッ ト 利 用 者 も 、2 年 前 ま は 約 2 過 っ た 性 

が 半 夫 を 占め る まで に 伸び て 来 て いる と 言わ れ て お り 、 そ の 
よう に 素早 く 柔 軟 な 対応 が 求め られ る で し ょ う 。 


今回 の セミ ナー で は 、 その よう な 成功 人 8 か 5、 こ れ か ら の 電 議 > quvan:( の の 上 や セ な つこ 
子 商 肥 引 に お ける ビジ ネス モデ ル 二 し 、 より 浸 い 主 酒 足 

を 生む BtoO の ノウ ハウ を 探っ て 行き まま す 。 

ブロ グラ ム 読 了 後 、EF コ マー ス の ポー タル マス ター に よる 個 

別 の 相談 も 受け 付け ます の で 、 ぜ ひご 参加 < だ さい 


お 申込 は 下記 お 申込 フォ ー ム か ら どう ぞ を 


| 「 交 世代 BtoC 電 還 セ ミナ ー」 謗 座 日 各 69 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html lang="ja"> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift JIS"> 
<meta http-equiv=Content-Style-Type content="text/css"> 

<link re に "stylesheet" href="seminar.css"> 

<title> 次 世代 BtoC 戦略 セミ ナー </title> 

</head> 


<body Iang="a"> 


<h1> 次 世代 BtoC 戦略 セミ ナー </h1> 
<h2> あな た の 会 社 は BtoC を 100 % 活 用 し て いま すか ? </h2> 


<divclass="Wg 罰 "> <!-- ===== ス タイ ル [Main| 適用 ===== --> 


人 9 <imq src="photo.jpg" width="237" height="274" alt="BtoC 戦 略 セ ミナ ー" て lass="p/o9"> 

<P> 

現在 は 頭打ち と いわ れ て いる BtoC 市 場 で す が 、 米 国 で は 衣料 業界 が 旧態 然 と し た 「 オ ン ラ イン カタ ログ 」 
か ら 、 利 用 ユー ザー の 情報 を 最大 限 に 取り 入れ 、 個 々 の 要求 に 対応 で きる シス テム を 打ち 出す な ど し て 成 
功 を 収め て いま す 。<br> 

特に 、 扱 う 商品 の 性 質 か ら 、 ネ ッ ト 利 用 者 の うち 、 半 数 を 占め る 20 代 後半 か ら 30 代 前 半 の 層 に ター ゲッ 
ト を 絞り 、 な か で も 女性 を 重視 し た 戦略 に 踏み 込ん だ こと が より 多く の ユー ザー を オン ライ ン シ ョ ッ ピン 
グ の 顧客 と し て 取り 込む 鍵 に な っ た と 思わ れ ま す 。<br> 

日 本 で の ネッ ト 利 用 者 も 、2 年 前 まで は 約 2 割 だ っ た 女性 層 が 半数 を 占め る まで に 伸び て 来 て いる と 言わ 
れ て お り 、 そ の よう に 素早 く 柔 軟 な 対応 が 求め られ る で し ょ う 。 

</P> 

<PD> 

今回 の セミ ナー で は 、 そ の よう な 成功 例 か ら 、 こ れ か ら の 電子 商取引 に お ける ビジ ネス モデ ル を 示し 、 よ 
り 深 い 顧 客 満 定 を 生 お BtoC の ノウ ハウ を 探っ て 行き ます 。<br> 

プロ グラ ム 終 了 後 、 ほ コマ ー ス の ポー タル マス ター に よる 個別 の 相 設 も 受け 付け ます の で 、 ぜ ひご 参加 く 
だ さい 。 

</p> 

<P class="xfe7 の "> お 申込 は 下記 お 申込 フォ ー ム か ら ど う ぞ </p> 








</div> <!-- ===== ス タイ ル [Main」 適用 ここ まで ===== --> 
介 <h3>「 次 世代 BtoC 戦 略 セミ ナー]」 講座 日 程 </h3> 


<div class=" essg96"> <!-- ===== ス タイ ル [Message」 適用 ===== --> 
9 <table> 
<tr> 
<td> </td><td class="pg7g/7">1 日 目 </td><td class="pa7g77">2 日 目 </td> 
<td class="porg77">3 日 目 </td><td class="porg77">4 日 目 </td><td class="porg の ">5 日 目 </td> 
</tr> 
<tr> 
<td class="pg7g の "> 第 1 回 </td><td>5/244 金 )</td> 
<td>5/25( 圭 )</td> <td>5/26( 日 )</td><td>6/1 土 )</td><td>6/2( 日 )</td> 
</tr> 
<tr> 
<td class="pgrg の "> 第 2 回 </td><td>6/11( 淡 り </td> 
<td>6/12( 水 )</td><td>6/13( 木 )</td> <td>6/144 金 )</td><td>6/15( 土 )</td> 
</tr> 
<tr> 
<td class="pg7g の "> 第 3 回 </td><td>7/5( 金 )</td> 
<td>7/6( 士 )</td><td>7/7( 日 )</td> <td>7/13( 士 )</td><td>7/14( 日 )</td> 




















</t> 
人 WM 333 
ヒーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー-| 


</table> 
</div> <!-- ===== ス タイ ル [Message」 適用 ここ まで ===== --> 


人 ⑳ <h3>「 次 世代 BtoC 戦 略 セ ミナ ー] お 申込 </h3> 





<div class=" ん ess96"> <!-- ===== ス タイ ル 「Message」 適用 ===== --> 
<form name="form.cgi" method="post" action=""> 
人 9 氏名 <input type="text" name="name1" class="t"><br> 
性 別 <input type="radio" name="radiobutton" value=" 男 "> 男性 
<input type="radio" name="radiobutton" value=" 女 "> 女性 <br> 
連絡 先 <1nput type="text" name="address" class=" な "><br> 
希望 日 
<select name="day" size="1"> 
9 <option class="co/or0"> お 選び 下さ い </option> 
<option class="co/or7"> 第 1 回 : 5/24( 金 )- 6/2( 日 ) </option> 
<option class="co/or2"> 第 2 回 : 6711( 淡 一 6715( 土 )</option> 
<option class="co/or7"> 第 3 回 7/5( 金 ) 一 7/14( 日 ) </option> 
</select><br> 
⑯) <input type="submit" name="submit" value=" 送 信 " class="Dufto7"> 
<input type="reset" name="reset" value=" リ セッ ト " class=" の pfO7"> 
</form> 
</div> <!-- ===== ス タイ ル [Message」 適用 ここ まで ===== 一 > 





<div class="Wgvgg7o7"><a href="event.htm"> イ ベン ト 情 報 へ </a></div> 


</body> 
</htm> 
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外部 スタ イル ファ イル 「seminar.cSSs」 
p.383 の HTML 文書 が 読み 込む 外部 スタ イル ファ イル 「seminar.css] で す 。 





@ body { 

margin: 0px Opx: 

padding: Opx: 

background: url("bgimg.jpg") #d7d7d7 no-repeat 
color: #000 


@ ht { 

margin-top: Opx 

padding: 15px: 

padding-right: 80px: 

background: url("seminarbg.qif") #36365d no-repeat: 
color: #ddd: 

text-align: right: 

font-size: 14Dx 

border-top: #003 2px solid: 

border-bottom: #003 2px solid 


9 h2 { 

margin: 15px 109% 0px 10%: 

padding: 10px 15px 10px 15px: 
background: url("h2bg.gif") 寺 ff no-repeat: 
て color: #003: 

text-align: left: 

font-size: 12px: 

border-top: solid 2px #669: p.192 
border-right: solid 2px #003: p.192 
border-bottom: solid 2px #000: p.192 
」 border-left: solid 2px #666 P-192 

















h3 { 

mardin: 15DX: 
margin-left: 15%: p.160 
margin-right: 15%: p.160 
padding: 10px: 
background: transparentz p.157 
color: #336: 

text-align: left: 
font-size: smalb 











border-left: solid 4px #336: 
border-bottom: solid 1px #336 
} 
P { line-height: 130% } p.66 
⑳ div.Mg { 
background: #d7d7d7: 
color: #330: 
margin: 0px 109% 10px 10%: 
padding: 10px: 
border-top: solid 2px #Ccc: 
border-right: solid 2px #999: 
border-bottom: soiid 2px #999: 
border-left: solid 2px #666 
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中 iv.Messgge 人 { 
margin: Opx 16% 10px 169%: 
padding: 10px 

















昌 
poo { 

margin-top: 5Dx: 

margin-left: 5px: 

float: right P-216 
} 
・fxfe7 の { clear: right } p.-219 
/*===== テ ー ブ ル へ の スタ イル 設定 =====*/ 
table { 

background: #999: 

color: #000: 

padding: 1px: 

table-layout: fixed p.254 
} 
td | 

background: #369: 

color: ff: 

padding: 5Dx: 

line-height: 130% 
} 
DO7O77 { 

backqround: #336: 

color: 衣 ff: 

text-align: center: 

border: inset 2px #336 
} 
/*===== フ ォ ー ム へ の スタ イル 設定 【 注 意 1】 =====*/ 
form { 

border: inset 2px #336: 

margin: 0Px: 

background: transparent: 

color: #000: 

padding: 5px: 

Hine-height: 150% 
} 
input. な は { 

width: 200px: 

backqround: #369: 

color: ff: 

ime-mode: active P.323 
} 


input.5gffo7 { 
margin: 10px: 
background: #336: 
color: 針 f 

} 

・o/o7 の { 
background: #369: 
color: 作 

} 

・co/o77 { 
backqground: transparent: 
color: #336 





} 





・Co/o72 { 
background: transparent: 
color: #369 


} 
/*===== フ ォ ー ム へ の スタ イル 設定 ここ まで =====*/ 


/* フッ タ の 設定 */ 

div.Mgvigg が op{ 
margin-top: 20Dpx 
margin-bottom: 20pxX: 
padding: 15px: 
padding-right: 10%: 
backqround: #003: 
color: ff 
border: #003 2px solid: 
text-align: right 

} 

div.Wogviggo7 ailink, div.WgVgofio7 azvisited { /* div.Navigation の 子 と な る a 要 系 に 適用 */ 
backqround: transparent: 
color: fff: 
text-decoration: none 








【 注 意 1】 この ソー ス で は フォ ー ム の 要素 へ スタ イル シー ト の 設定 を 行っ て いま す が 、Netscape Navigator 4.x で は フ 
ォ オー ム の 要素 に スタ イル シー ト を 適用 する と 、 入 力 エリ ア が 表示 され な いな どの バグ が 発生 し ます 。 こ れ に は 、 フ ォ 
ー ム 関係 の スタ イル の み を 別 の スタ イル ファ イル に 記述 し 、@import で その スタ イル ファ イル を 読み 込む と いう 回 避 策 
が あり ます 。 詳細 は p.389 を 参照 し こく だ さい 。 
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@⑯ 同一 HTML 文書 に 異な る スタ イル 適用 する 1.… 掲 示 板 


同じ HTML 文書 に 別 の 外部 スタ イル ファ イル を 読み 込ん で まっ た く 違 う 雰 囲 先 の パー ジ を 作る 
こと も で きま す 。 以 下 の サ ンプ ル は それ ぞ れ 外部 スタ イル ファ イル の み を 変え て スタ イル 比較 を 


し た も の で す 。 


最初 に 紹介 する の は 掲示 板 の ペ ー ジ で す 。 要 素 が 繰り 返さ れる 掲示 板 は テー ブル に よる レイ ア 
ウト より も 、 ス タイ ル シ ー ト の ほう が ファ イル サイ ズ が 軽く すむ お と いう 利点 が あり ます 。 


「sample3.htmll」 +「layout_a.css」 の 表示 (サン プル A) 
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ん 
ニア ン で すか ー。 
ir で に 2 が ます ね (て 


5 * な 
ハグ & こ ち 4 り い の で 、 て 志 じ な く て tr で すれ 


に な ます 


were 


FCSL SOFTCSWC 








また 、 こ の サン プル で は Netscape Navigator4.x で 生じ る バグ を 回 避 す る 方 法 の 一 例 を 使用 
し て いま す 。 バ グ を 招く スタ イル シー ト を さら に 別 の スタ イル ファ イル に まとめ 、@import で そ 
れ を 読み 込む と いう 方 法 で す 。 NN4.x は @import に 対応 し て いな いた め に 問題 の スタ イル シー 
ト を 読み 込み まず 、 バ グ を 回 避 す る こと が で きま す 。 


「sample3.htmll」 +「layout_b.css」 の 表示 (サン プル B) 


P1 了 あ つま 1 


に 司 回 回 
ファ イル ) 幼生 ) 表示 お 気 に 入 0(⑳ ツー ル D へ ルフ 0⑪ 2 定 】 
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サン プル A、B に 共通 の HTML 文書 「sample3.html」 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html lang="ja"> 

<head> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 
<meta http-equiv=Content-Style-Type content="text/css"> 
<tink re="stylesheet" href="layout_a.css"> = 二 ニ ーー ニー 
<title> ウチ の 子 あ や つま れ ! B B S </title> 

</head> 


<link re="stylesheet" href="layout 


7 を 





全 <body lang="ja"> 


<div id="/egd"> 

人 <h1- ウ チ の 子 あ つま れ ! BB S </h1> 

<div class="co77"> 

ペッ ト に つい て 語る BBS で す 。 質問 する 前 に は 検索 し て みて …… (中 略 ) …… く だ さい ね 。 
</diV> 

</div> 


< = ニニ ニニ メ 二 ユー ===== ーー> 
9 <div id="end"> 
<ul class="77g7/756"> 

<li><a href="new.html"> 新しい 投稿 </a></l> 
<li><a href="use.html"> 使い 方 </a></li> 
<li><a href="return.html"> 戻る </a></i> 
<li><a href="search.html"> 検索 </a></l> 
<li><a href="admin.html"> 管理 用 </a></H> 

</ul> 

</diV> 


<div 1d="co7fe7f"><!-- === 記事 全体 に 適用 する スタ イル (サン プル B の み ) === 一 > 


===1 スレ ッ ド 開始 ===== > 
<div class="p7ece"> 





<div class="pg/e7f5"> <!-- === 親 記事 ここ か ら === --> 


3 <h2> 猫 の 抜け 毛 っ て </h2> 
<div class= "co の 79"> 
<div class="g77e" テ 
名 前 : みょん <span class="ggfe">2002/05/25 ( 土 ) 02:32</span> 





</div> 

こん に ち は 。 は じ め て 書 寺 込 みしま す 。<br> 
ETD (中 略 ) EECEEJ 

ハゲ ちゃ っ た ら ど うし よう ・・・。 

</div> 


<form class="7espox" method="get" action="res.cgi"> 
<input class="sp た " type="submit" value=" この 記事 に 返信 "> 
</form> 





</div> <!-- === 親 記事 ここ まで === 一 > 


<hr> 
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<div class="7es"> <!ー === 子 記事 ここ か ら === --> 
<div class="7esco777e7f"> 

<div class="7es7g/7e"> 

名 前 Joy 猛 <span class="ggfe">2002/05/25 ( 士 ) 05:34</span> 
</div> 

<Span class="/es7g7"> ニ みよ ん さん </span><br> 

アビ シニア ン で すか ー。<brs 


FEED (中 賠 ) Yeare 

ブラ ッ シ ン グ を し て あげ る と 良い と 思い ます 。<br> 

</div> 

</div> <!-- === 子 記事 ここ まで === --> 
<hr> 

<div class="yes"> <!-- === 子 記事 ここ か ら === --> 


<div class="/esco77e74"> 

<div class="yes7g77e"> 

名 前 : 花 <span class="gge">2002/05/26 (日 ) 13:22</span> 
</div> 

抜け 毛 の 季節 ! <br> 

ュー (中 略 ) PUT 

な に か 良い 対策 法 は ある で し ょ うか ? <br> 

</div> 

</div> <!-- === 子 記事 ここ まで === --> 


<div class="pjece の ofo7"><hr></div> 
</div> 


<!-- =====1 スレ ッ ド ここ まで ===== 一 > 


<!-- =====1 スレ ッ ド ここ か ら ===== 一 > 
<div class="p7ece"> 


<div class="pore7fs"> <!-- === 親 記事 ここ か ら === 一 > 


<h2> うさ うさ (・※X・) </h2> 

<div class="co77779"> 

<div class="7ge"> 

名 前 Connor <span class="ggte">2002/05/26 (日 ) 22:05</span> 
</div> 

うち の ミニ ウサ ギ 、 マ ー フ が つい に 体重 フタ ケタ の 大 台 に 乗り まし た 。<br> 
ご うし よう ・・・*・ </div> 


<form class="7esDox" method="qet" action="res.cqi"> 
<input class="sp の た" type="submit" value=" この 記事 に 返信 "> 
</form> 


</div> <!-- === 親 記事 ここ まで === 一 > 
<hr> 
<div class="/es"> <!-- === 子 記事 ここ か ら === --> 


<div class="7esco 加 en が "> 

<div class="/es7o77e"> 

名 前 : きなこ も ち <span class="g7e">2002/05/26 (日 ) 23:54</span> 
</div> 

<SPan class="yes/"> > Connor さん </span><br> 

ミニ ウサ ギ が ! ? <br> 

PF (中 略 ) で ser 
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一 安心 (~「:) <bre 


</div> 
</div> = ト = ep 子 記 事 こ ご まで =e= ニャ 


<div class="p7eceoffo の "><hr></diV> 
</div> 


<!-- =====1 スレ ッ ド ここ まで ===== > 
</div> 


<!-- = ニニ ニニ ブ ツタ = ニニ == ニ = ーー> 

<div id="7oofe/"> 

<hr> 

<address> 

Webmaster:<a href="mailto:xxxx@xxxx.co.jp"> 管理 人 : し ゅ が 一 ちゃ ん </a> 
</address> 

</div> 





</body> 


</html> 





サン ブル A の スタ イル ファ イル 「layout_a.cSSs」 

body 要素 に border プロ パテ ィ を 設定 し 、 ペ ー ジ 全体 を ボー ダー で 囲ん だ スタ イル で す 。 
Windows 版 Internet Explorer5.5 以上 で は ボー ダー の 内 側 に スク ロー ル バ ー が 表示 され る の 
で 、 一 風 変 わ っ た デザ イン と な り ま す 。 





@import url(sub_a.css) /* [注意 1】 7 


@ body { 
margin: 0 
padding: 0: 
background: fff: 


color: #000: 
border: 20px solid #336 /* 全体 を 紺色 の ポー ター で 囲う */ ーーー ーー ーー pe 
} 


background: transparent 
Color: #933: 
text-decoration: none 
} 
aiactive, a:hovert 
background: #9cf: 
Color: #336: 
text-decoration: underline 
} 
hr { display: none } /* [注意 2】 */ p.202 
#eg の { 
margin: 0: 
padding: 55px 0 0 0: P.170 
background: url("headbg.gif") ff repeat-x: 
color: #000 
} 
ht { 
margin: 10px: 
padding: 11px 40px: 
font-size: 14px 
background: url("title_a.qif") #fff no-repeat 
color: #336 
} 
@ hp2 { 
mardin: 0: 
padding: 9px 40px: 
font-size: 12px: 
background: url("h2.qif") #9cf no-repeat 
color: #000: 
border-bottom: 2px solid #76a9dc 
} 
div.co7 が 7 { 
margin: 10px 5% 10px 35%: p.164 
paddinq: 5Dx: 
background: #fffi 
て Color: #336: 
font-size: smalb 
tine-height: 120%: 
border: 1px dotted #336 























} 
NN 
レレ トト トト トト ョ ピ BB ト blL ル 4t ル ン ん Nu | ね ね ね ね ね ね 


/*===== メ ニュ ー に 関す る スタ イル 設定 =====*/ 
導 e77 { 
padding: 0: 
margin: 0 5%z 
font-size: 90%: P.117 
backqround: transparent: 
color: #999: 
text-align: right 





} 
meng ul {( /" [注意 3】 7} 
enguli 人 {/* 【 注 意 3]】 */ } 


/*===== 記事 に 関す る スタ イル 設定 =====*/ 
div.p7ece { margin: 10px 5% } 
/*===== 親 記事 =====*/ 
div.pgre7fs 人 { 
margin: 3px 0 1px 0: 
padding: 8DX: 
background: #9cf: 
Color: #333: 
border: 2px solid #336 


} 

@ div.co7g 人 { 

margin: 3px 0: 

padding: 8Dx: 
background: #84b0dc: 
color: #333: 

』 border: 2px soid #336 

} 

div.7g77e { 
margin: 0 0 5px 0: 
Padding: 3PX: 
backqround: #336: 
color: #fff 
border: 0: 
font-size: small 

} 

form.7espox { 
margin: 0: 
padding: 0 

} 

input.su が 7 た { 
font-size: 12px: 
background: #fcc: 
color: #000 


( 


} 
/*===== 子 記事 =====*/ 
div.7es { 
margin: 1px 0 1px 100px: 
padding: 8px: 
background: #6c9: 
color: #333: 
border: 2px solid #336 





} 


iv.7esco/7e7 た { 
margin: 3Dx 0: 
padding: 8px: 
background: #9cfi 
color: #333: 


ー の 
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border: 2px solid #336 
} 
iv.7espge 
margin:005px0: 
padding: 3px 
background: #366: 
color: 針 ff: 
border: 0: 
font-size: small 


} 
@ ・res77O7 { 
background: transparent: 
color: #366: 
font-weight: bold P.122 





} 
div.p7ece の oo/7 { margin: 30px } 


⑳ /7ooer { "フッタ */ 
font-size: 10px: 
margin: 5px000: 
padding: 5px 5%: 
backqround: #fcc: 
color: #000: 
border-top: 2px solid #336: 
text-align: right 
} 











【 注 意 1】@import で 別 の スタ イル ファ イル を 読み 込む に は @import:ur( 衣 ) と いう 形式 で 読み か 込む スタ イル ファ イル を 
記述 し ます 。@import の 指定 は 、 ほ か の スタ イル の 設定 より も 前 に 置か な けれ ば 有効 に な り ま せん 。 


【 注 意 2】 <hr> タプ は スタ イル シー ト が 無効 の 環境 や ブラ ウザ で の 位置 調整 の た め に 設定 し て いま す の で 、 ス タイ ル シ 
ー ト が 有効 の 場合 は 表示 し な いよ うに 設定 し て いま す 。 


【 注 意 3】 こ こ で は HTML 文書 の リス ト 要 素 (ul、『i 要 素 ) を 1 行 で 表示 し た い の で す が 、 こ こ に display:inine を 指定 す 
る と Netscape Navigator 4.x で 要素 が 重なり 合っ て し まう と いう バグ が 発生 する た め 、 別 の スタ イル ファ イル 
「sub_a.css」 に 指定 し ます 。 


バグ 回 避 の た め の ス タイ ルフ ァイル 「sub_a.css」 
Netscape Navigator4.x で バグ が 発生 する スタ イル シー ト を 別 の スタ イル ファ イル に まとめ 、 
「layout_a.csS] の @import に よっ て 読み 込み ます (上 記 注意 】 参照 )。 





@ egul 。 人 { 
splay: inline: P.202 
Iist-style-type: none: P.242 
padding: 0 0 0 5px: 
margin: 0 

} 

@ #eguli 人 { 

display: intine: 

list-style-type: none: 

padding: 0 0 0 5px: 
margin: 0 00 10px 




















) 
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サン ブル B の スタ イル ファ イル 「layout_b.csSs」 


メニ ュー 部 分 に float プロ パテ ィ を 指定 し 、 そ の 他 の 要素 を 回 り 込 ませ て 段 組 の よう に レイ アウ 

ト し た スタ イル で す 。 こ の よう な 段 組 の レイ アウ ト は position:absolute を 利用 し て も 実現 可能 

で す が 、float な ら 文 字 が 増え て も HTML を 修正 する だ け で 済み ます (position の 場合 は スタ イ 

ル シ ー ト を 変更 する 必要 が あり ます )。 そ の た め 掲 示 板 の よ うな 文字 が 増え て いく コン テン ツ に は 
float が 向い て いる と 言え る で し ょ う 。 た だ し ブラ ウザ に よる バグ が 多い の で 注意 が 必要 で す 。 


@import url(sub 』b.css) っ 3) 


電 body { 

margin: 0PX: 

padding: 0: 

background: url("bg_g.jpg") #3c2a3 no-repeat 
color: #000 


backqround: transparent: 
color: #630: 
text-decoration: none: 
font-weight: bold 
} 
aiactive, aihovert 
background: transparent: 
color: 胡 作 : 
text-decoration: none: 
font-weight: bold 
} 
hr { display: none } /* 【 注 意 2] 
#Meg の { /* レイ アウ ト 指 定 */ 








margin: 80px 0 10px 30%: 
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paddinq: 55px 20px 20px 20Dx 
} 
ht { display: none }) /* 【 注 意 3] 
h2 { /* 【 注 意 4】 
margin: 10px 0 5px 0: 
padding: 5px 20Px: 
font-size: 12px: 
border-top: 1px solid #030: 
border-bottom: 1px solid #030 
} 
div.co7 む 7 { 
margin: 0: 
padding: 5DX: 
background: transparent: 
color: #333: 
font-size: 12px 





} 


/*===== メ ニュ ー に 関す る スタ イル 設定 =====*/ 
# 多 7e7g { /* レイ アウ ト 指 定 */ 


p-170 





float: leftz 
width: 30%: 
margin-top: 0: 
padding: 80px 0 0 20px 





p.216 


ーー 


} 








#end ul { 
display: blocki p.202 
margin: 10px 15px: 
padding: 20px : 
Hist-style: inside url("arrow.gif"): p.250 


font-size: 12px: 
Hine-height: 180%: 
background: transparent: 
color: 時 ff 
} 

元 e77a{ 
中 splay: intine: 
margin: 3PX 
padding: 3px: 
background: transparent: 
color: 狼 作 

} 

 #meng aihover{ 
splay: inline: 
margin: 3Dxz 
padding: 3px: 
background: #b3c2a3: 
color: #030 

} 


/*===== 記事 に 関す る スタ イル 設定 =====*/ 

#co/fe/t { /* 記事 全体 の レイ アウ ト 指定 */ 
margin-left: 31%: p.160 
padding: 20px 





} 
/*===== 親 記事 =====*/ 
div.pg/e7s 人 { 
margin: 0 5px 0 0: 
border-bottom: 1px dotted #030 p.192 








り 

div.co79 
margin: 3px 0: 
padding: 5px 0 5px 15px 

ま 

IiV.ge, diV./es70/7e tt 。 だ 【 壮 意 41 

margin: 0 
padding: 5px 0 5px 26px: 
border: 0: 
font-size: 12px: 
font-weight: bold 

} 

pan.dofe { 

backqround: transparent: 
color: #333: 
font-size: 10px: 
font-weight: normal 

} 

form./espox { 
margin: 2px 0 12px 0 
padding: 0 

} 

1nput.sg { 
font-size: 12px: 


7 


background: transparent: 
color: #000: 

width: 100%: 

margin: 0 

padding: 5px 


} 
/ ド = ニニ ニー= 子 記事 =====*/ 
diV.7es { /* 【 注 意 4】 */ 
margin: 1px 0: 
padding: 8px 8px 8px 50px: 
border-bottom: 1px dotted #030 
} 
div./esco/7/7e/ た { 
margin: 3px 0 
padding: 8px 
} 
7es/77{ 
backqround: transparent: 
color: #039 
} 
div.pjecepofto77 {margin: 30px } 


#footert 5 オッ 
clear left: /* レイ アウ ト 指 定 (#menu の tloat を 解除 ) */ ーーーーーーー イ ーp.219 
font-size: 10px: 
margin: 30px000: 
padding: 5px 5%: 
background: transparent: 
color: #000 

} 











【 注 意 1】【 注 意 2】p.395 の 注意 を 参照 し て くだ さい 。 
【 注 意 3】h1 要素 の 内 容 は body 要素 の 背景 画像 「bg_g.jpg」 に 画像 と し て 含ま れ ま す の で 、 非 表 示 に し ます 。 


【 注 意 4】 こ の 3 カ所 に は 背景 画像 の 指定 も 行い ます が 、Netscape Navigator 4.x で は 、 背 景 画像 に 透過 GIF を 指定 し 
て も 正常 に 透過 し な いと いう バグ が 発生 し ます 。 こ れ を 回 避 す る た め に 、 背 景 画像 の スタ イル に 関し て は この スタ イ 
ルフ ァイル で は 指定 せ ず 、 別 の スタ イル ファ イル 「sub_b.css」 に 指定 し ます 。 


バグ 回 避 の た め の ス タイ ルフ ァイル 「sub_b.css」 
Netscape Navigator4.x で バグ が 発生 する スタ イル シー ト を 別 の スタ イル ファ イル に まとめ 、 
「layout_b.css」 の @import に よっ て 読み 込み ます (上 記 注意 】 参照)。 


h2 { 

background: url("h2_b.gif") no-repeat 

color: #030 

} 

⑳@div.7o77e,div.7es7g7e { 
background: url("name.gif") no-repeat left center : 
color : #063 

} 

div./es { 
background: url("res.gif") no-repeat イーp.157 
て color : #333 














78 








いま す が 、 ス タイ ル シ ー ト に よっ て 横並び 、 縦 並び と いう よう に まっ た く 違 う ス タイ ル で 表示 す 
る こと が 可能 で す 。 


ファ イル (P) 大 業 E) 表示 お 気に入り ⑯) ツー ル ①D 


ヘル ブ ⑬ 


lsearch ge 栓 


4 
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サン プル C、 D に 共通 の HTML 文書 「sample4.html」 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona/EN"> 
<html lang="]a"> 

<head> 

<meta http-equiv="Content-Type" content="text/htm: charset=Shift JIS"> 
<meta http-equiv=Content-Style-Type content="text/css"> 
<Hink rel="stylesheet" href="layout_c.css"> 年 ー ニ ーー ニー 
<title>Style Search</title> 

</head> 





介 。 <body ang="ja"> 


<h1>Style Search</h1> 
<hr> 


@ <div id="foo/pox"> <!-- == ニ === 検索 窓 こ こ か ら ===== > 

<form class="seg/rc7" method="get" action="/search/"> 
<input class="fexf" type="text" size="20" name="searchbox" value="search me"> 
<input class="sgp7 放 " type="submit" value=" 検索 "> 





</form> 
</div> <!-- ===== 検索 窓 ここ まで ===== > 
<hr> 
<div id="meng"> <!-- ===== トッ プリ ンク 部 分 ここ か ら ===== 一 > 
<ul class="e700757"> 


< ids"ew"><a href="#"> 新着 </a></l> 
<li id="top"><a href="#">TOP10</a></i> 
< id="7o6"><a href="#">HOT キー ワー ド </a></> 
</ul> 
<ul class="eng/7542"> 
< id="ogp"><a href="#"> サ イト マッ プ </a></H> 
<li id="/e/p"><a href="#"> ヘ ルプ </a></li> 
< id="sdjsen"><a href="#"> 推薦 </a></li> 
<li id="rou/okd"><a href="#"> 登録 </a></l> 
</ul> 
</div> <!-- ===== トッ プリ ンク 部 分 ここ まで ===== > 


<hr> 


<!-- ===== メ イン 部 分 ここ か ら ===== > 
<div id="co7fe7 が > 


<div class="co7fe747"> 
<div class="conze7 を (7 た "> 
<d> 
<dt id="c7"><a href="#" ッ クリ エイ ター </a></dt> 
<dd><a href="#">WEB デザ イナ ー </a>、 
<a href="# が "> グラフィック デ ザイ ナー </a>、 
<a href="#"> イ ラス トレ ー タ ー </a>、 
<a href="#"> フォ トグラフ ァ ー </a>、 
<a href="#"> 建築 家 </a></dd> 
<7d に > 
</diV> 
<div class="cote7 た 7 の 7 が > 
<d> 








400 ビジ ュ ア ルイ ン デ ックス 


<dt id="we の "><a href="#">WEB</a></dt> 
<dd><a href="#"> 総合 </a>、 
<a href="#"> コミ ュ ニ ティ ー </a>、 
<a href="#">HTML</a>、 
<a href="#">Javascript</a>、 
<a href="#">CGI</a> 、 
<a href="#">CSS</a>、 
<a href="#">FLASH</a>、 
<a href="#"> 広告 規定 </a></dd> 
</d に 
</div> 
</div> 


<div class="cofe7f2"> 
<div class="co7re/ た /e た "> 
<d> 
<dt id="g9rg"><a href="#">Graphic</a></dt> 
<dd><a href="#"> ドッ ト 絵 </a>、 
<a href="#"> フォ トシ ョ ッ プ </a>、 
<a href="#"> イラストレーター </a>、 
<a href="#"> ペイ ンタ ー </a>、 
<a href="#"> リ ンク 集 </a></dd> 
sd に 
</div> 
<div class="co7fen た 7 が "> 
<d に 
<dt id="poo ん "><a href="#"> 雑誌 ・ 本 </a></dt> 
<dd><a href="#">Web 専門 誌 </a>、 
<a href="#">Graphic</a>、 
<a href="#">Fashion</a>、 
<a href="#">Tips</a></dd> 
db 
</div> 
</div> 











<div class="co7fe773"> 
<div class="co7fe7 た -/e た "> 
<dl> 
<dt id="77ce"><a href="#">NiceSite</a></dt> 
<dd><a href="#"> 楽 し い </a>、 
<a href="#"> カッ コイ イ </a>、 
<a href="#"> ク リー ン </a>、 
<a href="#"> ナ ビ ゲ ー シ ョ ン </a>、 
<a href="#"> ソー ス </a></dd> 
<7d に 
</div> 
</div> 


</div> 
<!-- ===== メ イン 部 分 ここ まで ===== --> 


<hr> 
<div class="copy" lang="en">&copy: copyright StyleSearch 2002</div> 


</body> 


</htm> 








サン プル C の スタ イル ファ イル 「layout_c.css」 

横幅 を 固定 し た (ウィ ンド ウ の 大 き さ を 変更 し て も レイ アウ ト は 変わ ら な い ) デザ イン の ボー 
タル サイ ト の サン ブル で す 。 

トッ プリ ンク の 要素 に display:inline を 指定 し て 上 部 に 横 に 並ぶ よ うに し て いま す 。 

な お 、 こ の サン プル は Netscape Navigator4.x で は 表示 が 崩れ る 等 の バグ が 発生 し ます 。 


MIE ISY や 


body { 
marqin: 0DX: 
padding: 0px: 
background: url("searchbg.gif") f60 repeat-y: 
color: 計 作 


hr { display: none ) /* 【 注 意 1] 
⑳ ht { 
margin: 0px Opx 15px 0Px: 
border-bottom: 1px dotted #fffz 
background: url("title_a.gif") transparent no-repeat left center: 
color:#fff: 
font-size: 12px 
font-family: Georgia, "Times New Roman", Times, senif 
text-transform: uppercase: 
padding: 30px 5px 5px 270px 
8 


/*===== リ ンク の スタ イル 設定 =====*/ 
全 』 { 

background: transparent: 

color: #000: 

text-decoration: underline 
し 
但 aiactive, aihover { p.39 
backqround: transparent: 
color: #fffi 
text-decoration: underline 


} 








/*===== 検索 窓 の スタ イル 設定 =====*/ 
9 #toolbox { 

margin: 20px 0Px: 

padding: 0px: 














POsition: absolute: P.208 
top: 5Dx p.212 
left: 400pxi D.212 
width: 300px: 

background: transparent: 

color: #fffi 

overflow: visible: p.230 
z-index: 1 D.222 





} 
inputfext 。 { 
width: 180px: 
backqround: #f60: 
color: #fffi 
font-size: 14px: 
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border: 2px solid 針 f 


} 

input.sp7 な 人 { 
width: 60px: 
font-size: 12px: 
background: #f60: 
color: 計 ff 

} 


/*===== トップ リン グ 部 分 (上 部 の 囲み ) = 
前 en 8 

margin: 10px 25px: 

padding: 0px: 

border: 1px soiid 計 ff: 

width: 640px = 








background: #f60: 
color: 航 60 

} 

uLen/7s47 { 
margin: 15px OPx: 
padding: 0px: 
font-size: 12px: 
line-height: 150%: 
text-aliqn: center: 
position: relative 

} 

uLend/7s42 { 
margin: 10px Opx: 
padding: 0px: 
font-size: 10px: 
line-height: 150%: 
text-align: center: 
position: relative 


軸 { 
width: 120px: 


p.198 





displayi intine: 
margin: ODXz 
padding: 0px 

} 
/*===== トッ プリ ンク 内 の リン ク の スタ イル 設定 ====== */ 

x7e77547 ia{ 
width: 100%: 
text-decoration: none: 
border: 1px solid 誕 30: 
font-weight: bold: 
background: 故 fb27 條 
color: 30 

} 

x7e7077542 ia 
width: 100%: 
text-decoration: none: 
border: 1px dotted #f30: 
background: #f30: 
color: 盾 ff 

} 

eg/7s77 aactive, .77e7//757 a:hover,.meng/ が sf2 azactive, .7e7g/7s2 a:hover 
text-decoration: underline: 
background: 尋 ff: 





p.202 


{ 
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color: f30 
} 


/*===== メ イン 部 分 の 項目 =====*/ 
dL { 
margin: 15px 25Px: 
padding: 0pxi 
width: 640px: 
background: transparent 
color: #fff 


@⑳ dt { 

margin: 5Dx OPX: 

padding: 12px 5px 2px 40DX: 
border: 1px solid 寺 ff 


ーー 


@⑳ dta { 
text-decoration : none: 
font-weight : bold: 
font-size: 14DX: 
background: transparent: 
color: 放 ff 





} 
dd { font-size: 10px } 
/*===== 項目 の タイ トル =====*/ 
#7 { 
background: url("ct_cri.gif") #f60 no-repeat: 
color: ff 
} 
#we の { 
background: url("ct_web.gif") 地 60 no-repeat: 
color: 衝 ff 
} 
#97g { 
background: url("ct_gra.gif") #f60 no-repeat: 
color: 詩作 
} 
#Dook { 
background: url("ct_book.gif") 聞 60 no-repeat: 
color: #fff 
} 
#7jce { 
background: url("ct_nice.gif") 尋 60 no-repeat: 
color:#fff 





div.copy { 
margin: 30px 25DxX: 
padding: 5px: 
font-family: Georgia, "Times New Roman", Times, serif 
text-transform: UDDercaSe: p.63 
font-size: 10px: 
width: 640Dpx: 
text-align: right 





} 








【 注 意 1】p.395 の 注意 2 を 参照 し こく だ さい 。 
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サン プル D の スタ イル ファ イル 「layout_d.css」 

横幅 を 変更 可能 な (ウィ ンド ウ の 大 き さ を 変更 する と レイ アウ ト も 変わ る ) デザ イン の ボー タ 
ル サ イ ト の サン ブル で す 。 

サン ブル B と 同じ く 段 組 の レイ アウ ト に な っ て いま す が 、 こ ちら は position:absolute で 制御 
し て いま す 。 こ の 場合 、 コンテンツ の 量 が 増え る な ど し て 高 さ が 変わ る と スタ イル シー ト を 書き 
直す 必要 が あり ます が 、 コ ン テ ン ツ が 頻繁 に 増え る の で な けれ ば 、position:absolute で も 問題 
は な いで し ょ よう 。 

な お 、 こ の サン プル は Netscape Navigator4.x で は 表示 が 崩れ る 等 の バグ が 発生 し ます 。 


body { 
margin: Ox 
padding: 0px: 
background: #7d9588: 
color: #ccc 
ま 
hr { display: none} /* [注意 1 ソ 
⑳ hi 
margin: Opx 5% 0px 5%: 
padding: 24px 5px 5px 60px 
font-size: 12px 
font-family: "Courier New", Courier。 mono: P.114 
font-weight: norma 
border: 1px solid #336: 
border-bottom: 2px ridqe #333: 
background: url("title_b.gif") #366 no-repeat left bottom: 
color: #9cc 





} 


/*===== リ ンク の スタ イル 設定 =====*/ 
a 

background: transparent: 

color: #033: 

text-decoration: none p.60 








} 

aiactive, aihover { 
background: transparent: 
color: #9ccz 
text-decoration: underline 





} 


/*===== 検索 窓 の スタ イル 設定 =====*/ 


旬 fom { 
margin: 0DX: 


」 padding: 0px 
} 
#foo/Dox { 


margin: Opx 5% 0px 5%: 

padding: 5px 5px 5px 20px: 
border-top: 1px solid #DOD0B9: 
border-bottom: 3px ridge #D0D0B9: 
text-align: right: 

background: #7a978d: 

color 角 寿 
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border: 1px solid #336 
} 
@ input.fext 。 { 
margin: OX: 
padding: 2PX: 
width: 320pxX: 
font-size: 14DxX: 
background: #eaddc3: | 
color: #366: 
border: 2px solid #366 
} 
@ input.s が 7 た { 
padding: 2Px: 
width: 60px: 
font-size: 12PX: 
background: #366: 
color: #fff: 
border: 3px double #9cc 
} 


===== トップ リン ク 部 分 (左側 ) ===== / 





| #menu { 

position: absolute: ー ーーーーー ト ーp.208 
z-index: 2: 
top:100px: 十 ーp.212 
left: 5%: ーp.212 
width: 150Dx: 
margin: 1DX: 
padding: Opx 








} 
却 engulHi {display: inline } 
家 e70 uL { 

margin: 10px OpX: 
padding: 0.5em: 
list-style-type: none: ニニ ーーp.242 
border-top: solid 1px #699: 
border-right: soiid 1px #033: 
border-bottom: solid 1px #033: 
border-left: solid 1px #699: 
font-size: 12px: 
background: #547768: 
color: #333 





} 

/*===== トッ プリ ンク 内 の リン ク の スタ イル 設定 ====== */ 
@ eng ailink, 抽 eng aiVisited { ーー p.39 

margin: 0Px 

padding: 4DX: 
border-top: soid 1px #CcC: 
border-right: soiid 1px #033: 
border-bottom: solid 1px #033: 
border-left: solid 1px #Ccc: 
display: block: 
background: #366: 
color: ff 








} 
@ #eng ai:hover { 
mardin: Opx: 
padding: 4Px: 
border-top: solid 1px #111: 
border-right: soiid 1px #eee: 
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border-bottom: solid 1px #eee: 
border-left: soiid 1px #111: 
display: block: 

backqround: #033: 

Color: #ccc 


} 


/*===== メ イン 部 分 の スタ イル 設定 =====*/ 
co/fe/ を { 
margin: Opx 5% 0px 59%: 
padding: 15px 0px 0px 180px: 
Position: relative: p.208 
z-index: 1: P.222 
border: 1px solid #336: 
border-top: 1px solid #dOdOB9: 
border-bottom: 3px ridge #dOd0B9: 
text-align: left: 
background: #7a978di 
color: ff 
co7fe7 を dl {margin-top: 10px } 

#copfen を dt 人 /* 項目 の タイ トル */ 
margin: 5px OpX: 
padding: 4Dx 5px 2px 20px: 
border: 1px solid #366: 
font-size: 14Dx: 
font-weight: bold: 
background: url("dt_b.qif") #6d9588 no-repeat: 
color: 針 作 ・ 











} 

#co7fep た dd {font-size: 12px } 
/*===== 項 目 の レ イア ウト =====*/ 

iv.cozef7,div.cozen2,div.co7fen43 { 

display: block: 
position: relative: 
width: 100%: 
height: 6em 





} 

@⑳⑲.co7repr-(er 【 
position: absolute: 
width: 48% 

} 

・co7fe7 を 79 が た [ 
position: absolute: 
left: 509%: 
width: 48% 

} 


⑲ divcopy { 
margin: Opx 5% 0px 5%: 
padding: 15px 5px 5px 30px: 
font-size: 12pxz 
font-family: "Courier New", Courier, mono: 
text-align: right: 
background: #366: 
て color: #9cc 
5 


【 注 意 1】p.395 の 注意 2 を 参照 し て くだ さい 。 


7 

















@ 同一 HTML 文書 に 異な る スタ イル 適用 する 3.…… お し な が き 


テキ スト を 縦 書き に 配置 し た 場合 と 横書き に 配置 し た 場合 の サン プル で す 。 ス タイ ル に 合わ せ 
て フォ ント を 変え る だ け で 、 異な っ た 雰囲気 を 演出 で きま す 。 た だ し 、 縦 書き 表示 で きる の は 
Internet Explorer 5.5 以 上 の み で す 。 


[sample5.htmll」 +「layout_e.css」 の 表示 (サン ブル E) 


ファ イル (F) 編集 CEC) 表示 お 気に入り ⑯) ウー ル D ヘル プ ⑪ 


父 方 党 


いい 介 本 六 才 の 欠 に 電 す の た 識 向 は 、 カ ユミ くつ ふき っ 洗 を 、 

その きる あい た た た まい は 、 全 の 逢 痢 に も 直す す 。 

で まま 半々 、 も の は 人 替り まし た 病人 糧 外 わい 月 本 本 た むる と その 各 。 

その き の 打 に 林 衝 信介 りら も すり すぐ で り の 太ら 衝 、 と の キキ を すん だ て に 棒 っ 大 中 析 本 
まさ まい た だ りす ます 、 


に 


寺 同 某 合 光 攻 謀 谷 すす w 人 3 知 


へ 活 意 合計 ( 秋 ) 滑 裕史 
補 生 導き 


に 2 
いた すっ 生ま た る エコ] 


ー ニ こよ 者 YS 字 知夫 
に そこ し キマ コ 
計 の 本 汗 間 導 洛 品 革 まあ 


うさ まま 3 ドス:- 王 】 
1 と ホー ジテ さく 





(イー テー な さ う こと と を 


の 伴 
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「sample5.html」 +「layout_f.css」 の 表示 (サン プル F) 


良 動 芳 - Microsoft Internet Explorer 


ブフ ァイル) 編集 E) 表示 ) お 気に入り @ 


美しい 日 本 原 国 の 緑 に 囲ま れ た 空間 は 、 な ご み と く つろ ざ の 

別世界 。 

その 落ち 者 い た た た ず ま い は 、 劉 の 新人 に も 通じ ます 。 
の 四 馬 の tk と 3 り を 生か し た 甘 細 な 叶わ い は 日 本 食 

だ か ら こ その 補 。 

その 日 の 絹 に 産地 か ら 届 けら れる より すぐ り の 海 の 幸 、 山 の 

半 を ふん だ ん に 使っ た 本 格 京 風 会 用 を ご 杭 味 いた だ け ま す 。 


@ 宙 疫 立 例 


遇 奉 身 いか あし 
吉 目 叶 共 世 半 茶 豆 

人 甘茶 工 ( 和 根 ) 界 活 部 圧 お くら 
が ます 清 閉 夫 胡 担 前 夢 根 
四辺 搬 げ 濁 老 第 重 揚 げ 
子 持 昨 布 ( 吉 の 子 ) 理 四 うさ く 風 
に | すう 
具 の 礎 出し 
まま の 実 橋 ゼ リ 
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サン プル E、F に 共通 の HTML 文書 「sample5.html」 


Ra 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html lang="]a"> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<meta http-equiv=Content-Style-Type content="text/css"> 
<link re="stylesheet" href="layout_e.css"> キー ニー ニーーー 
<title> 交 芦 亭 </title> 

</head> 





ル F の 場合 
<Hink re="stylesheet" href="layout 


者 


<body lang="ja"> 


人 W <divclass="7op"> 
<h1> 交 芳 亭 ご 案内 </h1> 


</div> 

<div id="g 加 "> <!-- ==== ニ = スタイル 「main」 適用 ===== 一 > 
<div class="cogfc カ "> <!-- ===== ス タイ ル 「catch」 適用 ===== 一 > 
<hr> 


<p> 

美しい 日 本 庭園 の 緑 に 囲ま れ た 空間 は 、 な ご み と く つろ ぎの 別世界 。<br> 

その 落ち 着い た た た ず ま い は 、 食 の 精髄 に も 通じ ます 。<br> 

四季 折々 、 旬 の 味覚 と 彩り を 生か し た 繊細 な 味わい は 日 本 食 だ か ら こ その 物 。<br> 
その 日 の 朝 に 産地 か ら 届 けら れる …… (中 略 ) …… いた だ け ま す 。 





<div class="end/75 が > <!-- ===== ス タイ ル 「menulist」 適用 ===== -> 
<h2> 御 献 立 例 </h2> 
] <div class="comme7f"> (献立 は 季節 に よっ て 変わ り ま す ) </div> 
<ol > 
<li> 前 菜 新緑 豆腐 子 持 鮎 も ずく </li> 
<Hi> 向 付 鯛 赤身 いか あし らい 一式 </H> 
<Hi> 吸物 焼 目 鍋 松茸 抹茶 豆腐 </H> 
<li> 装 合 菱 菊 落 (大 根 ) 鴨 治 部 煮 お くら </l> 
<li> 焼物 か ます 酒 盗 焼 衣 担 酢 蓮根 </l> 
<li> 油 物 磯辺 揚げ 海老 紫蘇 揚げ 獅子 慎 <7l> 
<li> 酢 物 子 持 昆 布 (数 の 子 ) 青 瓜 う ざく 風 </li> 
<H> 御 飯 白飯 ゆか り </l> 
<l> 止 柳 貝 の 赤 出 し </> 
<li> 果物 季 の 実 梅 ゼリー</li> 
</o に 
</div> <!-- ===== スタ イル 「menulist」 適用 ここ まで ===== 一 > 


</div> <!-- ===== スタ イル 「catch] 適用 ここ まで ===== > 
</div> <!-- ===== ス タイ ル [main」 適用 ここ まで ===== 一 > 
<hr> 

<div class="7oof"> </diV> 


</body> 
</html> 








に 
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サン プル E の スタ イル ファ イル 「layout_e.css」 

縦 書き 表示 と 行書 体 、 明 朝 体 (サン セリ フ 系 ) の フォ ント 指定 を し て 、 コ ン テ ン ツ に 合わ せ た 
デザ イン を 実現 し て いま す 。 た だ し 、 縦 書き は 対応 ブラ ウザ が Internet Explorer5.5 以上 、 フ ォ 
ント の 指定 は ユー ザー の 環境 に 左右 され る 、 な ど 条 件 が 多く な り ま す 。 そ の あたり も 考慮 に 入れ 
て スタ イル シー ト を 作成 する よう に し まし ょ う 。 


body { 
margin: 0px: 
padding: Opx: 
background: url("bg_a.gif") #cc9 repeat: 
color: #000 


hr { 
display: none: /* 【 注 意 1】 */ 
margin: 5DX 

} 


電 divzop { 

padding: 0px 300px 0px Opx: 

background: url("image.jpg") #000 no-repeat right: 
color: 好 f: 

text-align: right 


} 
ht { 
9 margin: Ox 


padding: 150px 20px 5px 5px: 














background: url("title_a.gif") #900 no-repeat top right: | p.157 
color: #966: 
text-align: right: p.69 
font-weight: tighterz D.122 
font-size: 12px 
} 
@990#o7 { 


margin: 0px 10% 30px 15%: 
padding: 20px 
background: transparent: 
color: #630: 
line-height: 140% 

} 


@9Odivcofcp 。 { /* 【 注 意 2】 */ 
margin: OPx: 

padding: Opx: 

background: transparent: 

color: #630: 

text-align: left: 

















font-family: "DF 行書 体 ""MS P 明 朝 ", " 細 明 朝 体 ", senf P-114 
} 
@⑩div.epg/sf { /* 【 注 意 2】 */ 
width: 500px: 
writing-mode: tb- じ p.100 
font: 16px/180% "DF 行書 体 ""MS P 明 朝 ", " 細 明 朝 体 ",0saka,serif: | 


に ーー シー イィ ドイ 0 の 
レー ドド トト トト リリ リ BbB⑤BLbc ト c⑯E] ヨ ペー 
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text-align: left: 

backqround: url("bg_a2.gif") #cc9 repeat: 

color: #633c3G p.56 
padding: 10px 30px 10px 10px: 

border: #630 3px ridge 





] h2 { /* 【 注 意 2】 */ 
margin: 10pxX: 


background: transparent: 
color: #900: 
text-align: left: 
font-size: 18DX: 
font-family: "DF 行書 体 ""MS P 明 朝 ", " 細 明 朝 体 ", serif 
border-left: #900 1px solid: 
border-bottom: #900 1px solid 
} 
div.co7/me7f { /* 【 注 意 2】 7 
background: transparent: 
color: #900: 
margini OpX: 
text-align: right: 
font-size: 10pxX: 
font-family: "DF 行書 体 ""MS P 明 朝 ", " 細 明 朝 体 ", senif 
} 


山 { list-style-type: none } 


4 ol { padding: 10px } 


divJoot { 
background: #900: 
color: 時 ff 
margin: 0PX: 





padding: 10pXi 
border: #900 1px solid 





【 注 意 1】 p.395 の 注意 を 参照 2 し て くだ さい 。 
【 注 意 2】Netscape Navigator4.x で は 指定 内 に 日 本 語 (フォ ント 名 ) が 含ま れる これ ら の スタ イル は 反映 され ませ ん 。 


サン プル F の スタ イル ファ イル 「layout_f.css」 
横書き の サン ブル で す 。 ゴ シッ ク 系 (セリ フ 系 ) の フォ ント を 指定 し て いま す 。 


body { 
margin: 0px: 
padding: 0px 
background: #ddd: 
color: #000 


hr { 
display: none: /* 【 注 意 1】 */ 
margin: 5Dx 

} 


W divzop { 
mardin: OpXi 
padding: 0px: 
background: #ddd: 
color: 針 ff: 
border: 1px 








h1 { 
margin: 56px Opx 0px Opx: /* 【 注 意 2】 */ p.164 
padding: 3px 5px: 
background: url("bg_b.jpg") 好 66 repeat-y: 
color: #666: 
text-align: right: 
font-weight: lighter: 
font-size: 10px 





0 加 { 
margin: 0DX: 
padding: 10px 10% 30px 300px: /* 【 注 意 2】 */ p.170 
background: url("mainbg.gif") #ddd no-repeat left center: 
color: #030: 
font-size: 12px: 
line-height: 150% 








hiv.cgf の 。 { /* 【 注 意 3】 */ 
margin: 0DX: 
padding: 20px 
background: transparent: 
color: #030: 
text-align: left: 
font-family: "MS P ゴ シッ ク ",0saka,"MS Gothic", serif: P.114 
font-weiqht: bold 











} 


iv.me/7s た { padding: 10px 30px 10px 0px } 
h2 { /* 【 注 意 3】 7 
mardin: 12px: 
backqround: transparent: 
Color: #666: 
text-align: left: 


っ 




























font-size: 18px: 
font-family: "MS P ゴ シッ ク ",0saka,"MS Gothic", serif 
} 
div.commen# 人 /* 【 注 意 3】 7 
margin: 0Px 
background: transparent: 
color: #900: 
text-align: right: 
font-size: 10px: 
font-family: "MS P ゴ シッ ク ",0saka,"MS Gothic", senif: 
font-weight: normal 


el { 

margin: 10pX: 

padding: 10px: 

background: #999: 

color: 退 作 

font-size: 12px: 
Hine-height: 140%: 
border-left: 好 99 10px solid: 
border-right: #f99 10px solid 








{ Uist-stvle-position: inside } D.248 


{ padding: 10px } 


【 注 意 1】p.395 の 注意 2 を 参照 し て くだ さい 。 


【 注 意 2】Netscape Navigator4.x で は margin や padding を 個別 に 指定 する と 反映 され な いこ と が ある の で 、 ま と め て 
指定 し た ほう が 安全 で す 。 


【 注 意 3】p.412 の 注意 2 を 参照 し こく だ さい 。 


に APPENDIX 





スタ イル シー ト の 策定 は W3C (World Wide Web Consortium) と いう Web 技術 の 標準 化 
団体 が 中 心 に な っ て 行っ て お り 、 現 在 は Level2 と いう 2 代目 の 勧告 が 最新 の も の と な っ て いま す 。 
勧告 で は 、 各 プロ バテ ィ の 働き な どの ほか に 、 以 下 の よ うな 内 容 を 定め て いま す 。 


適用 

プロ パテ ィ を 適用 で きる 要素 の 種類 

ブロ ッ ク レ ベル 要素 、 イ ン ラ イン レベ ル 要 素 な ど に つい て は p.4 を 参照 し て くだ さい 。 ま た 、 
display プロ パテ ィ (p.202 参照 ) に よっ て 表示 形式 を 変更 し て 、 イ ン ラ イン レベ ル 要 素 に の み 
適用 で きる ブロ バテ ィ を ブロ ッ ク レ ベル 要素 に 適用 する と いっ た 方 法 も あり ます 。 
デフ ォ ル ト 

プロ パテ ィ の デフ ォ ル ト 値 (初期 値 ) 
継承 

設定 し た プロ パテ ィ の 内 容 が 子 要素 な ど 下 位 の 要素 に 継承 され る か どう か 

継承 に つい て は p.44 を 参照 し て くだ さい 。 


下記 の 表 は 、 各 プロ パテ ィ の W3C に お ける 定義 内 容 で す 。 ブ ラウ ザ が 独自 に 拡張 し て いる プ 
ロ パ ティ に つい て も 同様 に 、 ブ ラウ ザ が 定義 し て いる 内 容 を 掲載 し て いま す 。 

各 ブ ラウ ザ は これ ら を も と に 対応 を は か る わけ で す が 、 必 ず し も 定義 通り に 実装 し て いる わけ 
で な く 、 ブ ラウ ザ の 種類 や バー ジョ ン に よっ て は 定義 と 異な る 場合 が あり ます 。 


-backgrounnd .: 92SC の 細 業 !。 定義 され て いな い _ し しない - 
_background-attachment すべ て の 要素  : 0 し な いい - 
-background-color .: NG の 貞 0 transparent 。 | し しない - 
_background-image 。 <: ウ 2N で の 本 RODeL 1 し しない - 
background-position ブロ ッ ク レ ベル 要素 、 0% 0% し な い - 

0 
_background-position-x すべ て の 要素 。 5 し な い IE 独自 
_background-position-y すべ て の 要素 。 | し 義和 し な い IE 独自 
_background-repeat <: すべ て の 要 来 し し しない - 
DeNaVi0 9SSGO 厩 枯 、 5 し な い IE 独自 
JDONGG GO 区 箇 oo 符 プ ロバ ティ の デフ ォ ル ト しない  - 
border-bottom すべ て の 要素 各 プ ロ パ ティ の デフ ォ ル ト しない - 
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border-bottom-color すべ て の 要素 color プロ バテ ィ の 値 し な い - 





-bordercollapse  : テー ブル 要素 。 _ coMa 
-border-color . すべ て の 要素 難 プロ パテ ィ の デフ ォ ル ト し な い  - 
border-left すべ て の 要素 


border-left-color 







すべ て の 要素 


すべ て の 要素 





font-vi 
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iine-break ブロ ッ ク レ ベル 要素 、 normal 


テー ブル 要素 、 セ ル 要 素 





注 1 
注 2 
注 3 
注 4 
注 5 
注 6 
注 7 
注 8 
注 9 


position プロ パテ ィ で strict 以外 の 値 が 指定 され た 要素 

スタ イル シー ト で 自動 生成 され る 要素 

非 置換 イン ライ ン 要 素 と テー ブル 列 (col 要素 、colgroup 要素 ) を 除く 

ー 部 を 除く 

スク ロー ル バ ー を 生成 する 要素 

ブラ ウザ と 文字 の 表記 方 向 に よる 

auto (IE6 以 降 )、below (IE5.5) 

非 置 換 イ ン ラ イン 要素 と tr 要素 、 thead 要素 、tbody 要素 、tfoot 要 素 を 除く 
フォ ー ム の 部 品 な ど 一 部 の 要素 を 除く 
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1 1( 





同じ 効果 が 得 ら れる HTML タグ と スタ イル シー ト (CSS) の 併記 一 覧 で す 。 
HTML タグ の 表記 を CSS に 改め た い 場 合 、 ま た は CSS の 記述 を HTML タグ に 改め た い 場 合 
に 参照 し て くだ さい 。 た だ し 、 デ ザイ ン に 関す る 指定 は CSS で の 指定 が 推奨 され て いま す 。 


改行 し な いで 表示 させ た い 1 


に つこ ご ご コ ご ご ニン ピー ニニ ーーー ご ーーーー ニ ーーーーーー ニ ニー ニニ ニー ニニ ーー ニー ご ニニ ニニ ニー ニニ ニニ ー ご ーーー ニ ご ニー ニニ ーー ニーー ニ ーー ニニ ニニ ーー ニニ ーー 
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HTML 表記 








CSS 表 記 img{margin: 誠 px 今 pxzfloaE2 ナ べつ 
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スタ イル シー ト の プロ パテ ィ で 検索 する イン デック ス で す 。 


Lb 
background 
background-attachment 
background-color .… 
background-image . 
background-position 
background-position-X .… 
background-position-y 
background-repeat . 
behavior 
border .… 
border-bottom.……… 
border-bottom-colo 
border-bottom-style 
border-bottom-width 
border-collapse 
border-color 
border-left .… 
border-left-color . 
border-left-style . 
border-left-width . 
border-right .……… 
border-right-color 
border-right-style 
border-right-width 
border-spacind … 
border-style.… 
border-top … 
border-top-color . 
border-top-style . 
border-top-width. 
border-width 












































caption-Side 
clear . 
CIiD.. 
color . 
content . 
curSOr .… 


direction .… 
display 








empty-cells … せ ……………… 
電王 


fiter:Alpha . 
fter:Basiclmage 
filter:blur .…… 
filter:MotionBlur 
fiter:Chroma .…… 
fiter:DropShadow 
filter:Emboss 
filter:Engrave 
fiter:fliph0 .… 
filter:flipv() . 
filter:Glow . 
filter:gray 
filter:invert . 
fiter:mask . 
filter:MaskFilter 
filter:Shadow 
fiter:Wave . 
filter:xray() 
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font-size 
font-style .… 
font-variant 
font-weight 


layout-glid 
layout-glid-char.… 
layout-glid-line 
layout-glid-mode 
layout-glid-type 
left .… es 
letter-Spacindg 










line-break 

line-height 
list-style.… 
list-style-image .. 
liSt-style-position 
list-style-type . 


margin 
margin-bottom 
margin-left.… 
margin-right. 
margin-top . 


overflow.……… 
overflow-x 
overflow-y 


者 
BIG asaesssiss 
padding-bottom 
padding-left 
padding-right . 
padding-top .… 
page-break-after. 
page-break-before 
position 
























ruby-align 
ruby-position 


scrollbar-3dlight-color. 
scrollbar-arroW-color 

scrollbar-base-color .… 
scrollbar-darkshadow-color 
scrollbar-face-color.… 
scrollbar-highlight-color 
scrollbar-Shadow-color. 


table-layout 
text-align .… 
text-decoration 
text-indent 
text-justify .… 
text-transform 
text-underline-position 























unicode-bidi .… 


vertical-align 
visibility 


WMNING-SD sseeteseaaesseeoeit 88,.91 
width 
word-break . 
Word-spacind . 
writing-mode .… 


ァ -index 
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APPENDIX 





スタ イル シー ト の 値 か ら プ ロ パ ティ の ペー ジ を 逆 引き する イン デック ス で す 。 








を EE 
100 .… .122 
200 .… 122 
300 .… .122 
400 .122 
500 .…… .122 
600 .… .122 
700 -122 


800 -.122 
900 レンス 
打 gb.… 47,56.136.157.179.182,192.195,320 


rggbb .……47.56.136.157.179.182,192,195,320 


above .… 
absolute 








-102.105 











activecaption 
all-scroll. 
alWayS … 
apPPWOrkSpace . 
adUa …… 
armenian 
attr.… 
auto . 









76,102.105,109.112 


161,164,167,170.198.212.222 
225.230.234,238.254.316,.323,335 





autO-DOS .… 


background 







bolder. 
both.… 
bottom 
DNS sss 97 
buttOriSRBGOW as 48.350 





















MO に srcaaohaa2siaaasrazssssashssts 48.350 
capitalize 

caption .. 

captiontext rosevssssssssss2 二 2 の 
center .… 9.105,150.154,.157 
char .108.112 
circle -242.250 
cjk-ideographic .242,250 
close-quote -326 
col-reSize -316 
collapse . .261 
crosshair .316 
CUrSiVe .… .114.130 

Ld 】 
dashed .185.188.192.195 













decimal.… 
decimal-leading-Zero - 
default .… 


-242,250 
242.250 





distribute-all-lines 
distribute-letter .… 
distribute-SDace . 
dotted. 
double 


@-reSiZ@ . 
embed 
empty-string 


fantasy 









114,130 
08.112.147,157,.208,254 













dgeorgian 
gray … 
graytext 
green … 
OOWB ecoeeyweenrnis の et 





hebrew . 
help .… 
hidden . 
hide .… 
highlighttext 
hiragana .… 
hiragana-iroha 


icon … 
inactive 
inactiveborder 
inactivecaption .… 
inactivecaptiontext 
infobackground . 
infotext . 

























inline … -105,202 
Inset .… 85.188,192.195 
inside 












inter-cluster 
inter-ideograph 
inter-word .……… 
italic 


ata 
katakana-iroha 
keep-all 


large .… 






















larger 118,.130 
left .. 69.105.150.154,.157,216,219 
lighter 122.130 
lime. 


line . 
line-throug 
liSt-item . 
loose.. 
lower-alpha . 
lower-greek . 
lower-roman. 
lowercase 
RB) 





maroon .… 
medium 

menu … 
menutext 
Imessaqge-box 
middle 





ImonoSDacCe .…- 













n-reSize 
navy … 
ne-reSiZe . 


newSsDaper . 
no-close-quote 


no-Open-quote 
no-repeat 
none … 


60.63.108.109.112 
112,140.157.185.188,192.195 
202.216,219.242.246.250,250,330 



















OWN 66,80,82,88,91.94,97 
122.126.128,130.130.130,228,332 

NOsMIOW 和 ee 316 

nowrap 

nwW-TeSiZ( 

Lo 】 

ohanassaroeeevayssttyfcrersee 126,.130 

olive .… 48,.342 

Open-quote . …326 

outset .… 85.188,192.195 

Outside .… 248,250 

overline . 










PrOdreSS 
Purple 









relative 4 
repeat . 44.157 
repeat-X 44.157 





repeat-y .………… 144.157 
rgb(n%.n9%.n% 7.56,136,157 

179.182.192.195.320 
Be 47.56,136.157 

179,182.192.195.320 
ridge 185,188.192,195 
right. 69.105.150,.154,.157,216,219 









TOW-『eSiZe . 


S-reSize .. 
SSCSB 人 sissnaidiniireeis ss と re 114,130 
Scroll . -147.157,230.234.238 
scrollbar . 





Se-reSiZ@ .… 
separate .… 
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Serif .… 
show .… 
silver 
small 
small-capS 
に 1 いけ CTTTFPTT 118.130 
solid . -185.188.192.195 
Square 

















static . 208 
status-bar 133 
strict . 94.108,112 


sub 
SUDeT . 


SW-TeSiZe .… -316 
tb-rl .100 











teal 48.342 


text …:316 
thick .… 173.176.192.195 


thin .… .173,176.192,195 
threeddarkshadow . 
threedface .. 
threedhighlight 
threedlightshadow . 
threedshadow 
72.150.154,.157.258 


transparent . 136,179.182,.192.195 


underline . 
upper-latin .… 
upper-roman . 
UPDDerCaS@ 
1 


vertical-text 
Visible .…… 














windowframe . 
windowtext.… 


x-large … 
x-Small 
XX-larde . 
CS aar 









4 リロ リル 





スタ イル シー ト の 効果 を あら わす 用 語 や 、 関 連 する 言葉 を 検索 する イン デック ス で す 。 
































(カンマ) .… 
530 ロ ジ )。。 

(ジャージ) .25 
"(シン グル クォーテーション ) .… -7.50.330 
/ (スラ ッシュ )…… -130 
? (セミ コロ ン ) gs 
"(ダブ ルク ォ ー テ -7.50,330 
(プラ ス )……… 33 
・ (ピリオド) … 25 
jimportant 9.20 
gb .… 47.343 


rggbb . 
% (日 位 ) 


CSS 12 
Wa 8 
が 

:active . 39 
:after 41 
:before . 41 
:first-letter .… 41 
:first-line 41 
focus . 39 
hover . 39 
ilang 39 
ilink . 39 
:viSited . 39 
< 8 
<IDOCTYPE> 51 
>-。 30 
昌 .6 
矢印 316 
四角 . 242 

し 】 

16 色 -.342.346 
10 進 数 -:242.351 
16 進 数 .… 47.344.351 


16 進数 対応 表 .351 
1 行 目 . 85 
256 色 . 344 


45 度 単位 .… 


Cascading Style Sheets 
class 属性 






























Cm (単位 ) 

colorname .… ・346 

CSS. -2,10,198 
CSS1 . の HH 
CSS2 . .2.76.117.227 

DirectX. ・270 

DOCTYPE 宣言 51 

De 51 


Dynamic HTML 
em (単位 ) . 
@X (単位 ) .… 
Extensible Stylesheet Language 
GUI 環 境 . 
HTML 
HTML4.01 .… 
HTML タグ . 
HTML 文書 


In (単位 ). 
inherit 
Internet Explorer 
Internet Explorer 3.0 
Internet Explorer 4.0 .… 
Internet Explorer 5.5 
Internet Explorer 6 .… 
link 要 素 .… 
Macintosh 
Mac 版 Internet Explorer 5.x 
Microsoft 社 . 
mm (単位 ) . 
Netscape 
Netscape 6 
Netscape Navigator 4.0 
Netscape (Navigator) .… 
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DX (単位 ) 
RGB.. 















rgb(n,n,n) .… 
style 属性 . 


text/css .… 


Windows Me 
Windows VGA .… 
Windows XP 

Windows98 .. 
XHTML .… 
内 側が 浮き 上 が っ た よう に 見 える 枠 線 ..185.188 
内 側が へ こん だ よう に 見 える 枠 線 
上 付き 文字 .. 











大 文字 アル ファ ベッ ト .. 


















値 … 大 文字 ギリ シア 文字 .242 
後 要素 . … 大 文字 小文字 … 
あふ れる .. .…230.234, 大 文字 ロー マ 数 
アラ ピア 語 .。 親 ボ ックス . 
アル ファ ベッ ト 親 要 素 .… 
アル メニ ア 数 字 .… 折り 返し . 
オリ ジ ナ ル の カー ソル 
本 fr 人 IOKMtNNAEONNSGRbxtosaawesd 


-102.150.157.258 
122 
-122 
12.130.157,164.170 


176,182,.188,192,195.250 





304 





回 転 角度 ……… Ei 
外部 スタ イル シー ト .11.12.14 
外部 スク リプ ト .… .….338 








コメ ント アウ 


小文字 アル ファ ベッ ト .… 
小文字 ギリ シア 文字 
小文字 ロー マ 数 字 


量 本 的 な 16 色 . 
子 要素 .… 


キャ ッシュ . 
キャ プシ ョ ン .… 


シス テム フォ ント 
シス テム パレ ッ ト 


下 付き 文字 . 


ダレ ー ス ケー ル 化 。 
グレ イッ シュ .… 
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432 












スク ロー ル バ ー 

スク ロー ル バ ー の 色 .. 
スタ ー ト 地点 .… 
スタ イル シー ト . 

スタ イル の 優先 順位 .. 

スタ イル ファ イル . 
ae 
スモ ー ル キャ ピタ ル . 
スラ ッッ ミコ 


セン タリ ング 
セン チ メ ー ト ル 
先頭 の 引用 符 … 





配置 位 置 


バッ ク グ ラウ ンド 
発光 


08 
…91.7.28.60,88.112 
130.150.157.164,170 
176,195.250.264.330 





非 置換 イン ライ ン レ ベル 要素 . 
筆記 体 .… 
眉 紀 選民 
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へ こん だ よう に 見 える 枠 線 
へ ヘブライ 語 .… 





ライ ト グ レ イッ シュ . 
















まとめ て 設定 .………… 
マル チ メ デ ィ ア 機能 . .270 
回 り 込 み ………… 216 リサ イズ 
回 り 込 ませ る 側 . …219 リス ト ア イ テ ム 要素 von 旨 
回 り 込 み 解除 .… リス トマ ー ク 242.246.248.250 
領域 … 45 
起 移 リン ク 12.39 





右 詰め .… 隣接 する 要素 .. .22,33 
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) 45.167,173.176 
179.182.185.188.192 
195,261.267 





-185.188 
173.176 
・66.85.150.154 
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最 線 『 ブ プラ ウザ 
Internet Explorer 6.0 
& Netscape 6.2 対応 


HTML タ グ 辞 典 CEFD 







「 最 新 」 「 改 訂 版 」「 カ ラー 版 」 「 第 4 版 ] と 
HTML に OCS 


訂 版 で す 。 


Netscape 6.2 に 対応 し 、Web ペ ー ジ 作 
成 に 必須 な HTML タグ の すべ て を 隅 か ら 
隅 ま で 解説 し ます 。 付録 に は Web ペ ー ジ 
の 彩色 に 迷っ た と き に 役立つ カラ ー チ ャ ー 
ト や 配色 サン プル を 収録 。 これ 1 冊 で タ 
グ に つい て は 怖い も の ナシ |! ホー ムペ ー 
ジ 作 成 に な く て は な ら な い バ イブ ル で す 。 


既刊 好評 発売 中 !! 


JavaScript 辞 典 
Internet Explorer 5.5 & Netscape 6.0 対 応 


6 mn Esc aa 
JavaSoript を イチ か ら 勉 強し た い 入 門 者 に は リフ ァ レ ンス と し て 、 
と に か く ホ ー ム ペー ジ に JavaScript を 使っ て みた いと いう 方 に は 、 
すぐ に 使え る JavaScript サ ンプ ル 集 と し て 利用 で きる 構成 に な っ 
て いま す 。 ハ ン デ ィ リ ファ レン ス で 、 い つ で も どこ で も 手軽 に 
JavaScript が 学べ ます 。 








a 


ホー ムペ ー ジ 辞典 C う 
Internet Explorer 5.5 & Netscape 6.0 対 応 
ーー ツー ヘー ンー 計 0 


| 』 「HTML タ グ 辞 典 第 4 版 ] [スタイル シ ー ト 辞典 第 2 上 | [JavaScript 
辞典 ] が ギュ ギュ ッ と 縮 され て 1 冊 に ! 
ホー ムペ ー ジ 作成 の すべ て が 詰まっ て いる の で HTML タ グ 、 ス タ 
イル シー ト 、JavaScript の 知識 を 体系 的 に 身 に つけ た い 方 に は 最 
適 で す 。 1 冊 で 3 度 使え て 読み ご た え 丁 分 ! 


パワ ー ア ッ プ 続々 刊行 


| JavaScript 辞典 を 刀 う 


2002 年 9 月 上 旬 刊 行 予 定 
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